How to set height to fill height of parent node?
0
I want to try to make an HTML table using pure CSS and div/span elements. I currently have the following jsFiddle. However the table cell...
.table .table-cell {
float: left;
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
...elements don't fill the height of the parent row.
Please help me to resolve my problem.
EDIT: I make on pure CSS instead table element for increased performance.
EDIT2: Is it possible to simulate colSpan and rowSpan?
html css css-tables
edited Nov 23 '18 at 11:59
Brian Tompsett - 汤莱恩
4,1931337101
asked Apr 17 '13 at 13:00
ErikErik
2,16733105161
|
show 5 more comments
0
I want to try to make an HTML table using pure CSS and div/span elements. I currently have the following jsFiddle. However the table cell...
.table .table-cell {
float: left;
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
...elements don't fill the height of the parent row.
Please help me to resolve my problem.
EDIT: I make on pure CSS instead table element for increased performance.
EDIT2: Is it possible to simulate colSpan and rowSpan?
html css css-tables
edited Nov 23 '18 at 11:59
Brian Tompsett - 汤莱恩
4,1931337101
asked Apr 17 '13 at 13:00
ErikErik
2,16733105161
use table etc tags - I think the words 'rod', 'back', 'own', 'your' and 'for' come to mind
– matpol
Apr 17 '13 at 13:06
I'm not sure if you are being bound by an angry project manager to not use tables, but sorry, if you want to build something that looks like a table then just build a table. Why div's and span's?
– ASouthorn
Apr 17 '13 at 13:08
2
Just an additional comment...who told you that not using a table would increase performance? That's not even remotely true.
– ASouthorn
Apr 17 '13 at 13:12
Tables elements is very heavy HTML element.
– Erik
Apr 17 '13 at 13:15
1
That's not true. They used to be heavy in the old days, where systems would build layouts based on tables inside of tables inside of tables inside of tables etc. Nowdays, just building a table to render a table is no different than using div's. In fact, based on your code, your method is actually a couple of bytes bigger than it would be with tables!
– ASouthorn
Apr 17 '13 at 13:20
|
show 5 more comments
0
0
0
I want to try to make an HTML table using pure CSS and div/span elements. I currently have the following jsFiddle. However the table cell...
.table .table-cell {
float: left;
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
...elements don't fill the height of the parent row.
Please help me to resolve my problem.
EDIT: I make on pure CSS instead table element for increased performance.
EDIT2: Is it possible to simulate colSpan and rowSpan?
html css css-tables
edited Nov 23 '18 at 11:59
Brian Tompsett - 汤莱恩
4,1931337101
asked Apr 17 '13 at 13:00
ErikErik
2,16733105161
I want to try to make an HTML table using pure CSS and div/span elements. I currently have the following jsFiddle. However the table cell...
.table .table-cell {
float: left;
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
...elements don't fill the height of the parent row.
Please help me to resolve my problem.
EDIT: I make on pure CSS instead table element for increased performance.
EDIT2: Is it possible to simulate colSpan and rowSpan?
html css css-tables
html css css-tables
edited Nov 23 '18 at 11:59
Brian Tompsett - 汤莱恩
4,1931337101
asked Apr 17 '13 at 13:00
ErikErik
2,16733105161
edited Nov 23 '18 at 11:59
Brian Tompsett - 汤莱恩
4,1931337101
asked Apr 17 '13 at 13:00
ErikErik
2,16733105161
edited Nov 23 '18 at 11:59
Brian Tompsett - 汤莱恩
4,1931337101
edited Nov 23 '18 at 11:59
Brian Tompsett - 汤莱恩
4,1931337101
edited Nov 23 '18 at 11:59
Brian Tompsett - 汤莱恩
4,1931337101
4,1931337101
asked Apr 17 '13 at 13:00
ErikErik
2,16733105161
asked Apr 17 '13 at 13:00
ErikErik
2,16733105161
asked Apr 17 '13 at 13:00
ErikErik
2,16733105161
2,16733105161
use table etc tags - I think the words 'rod', 'back', 'own', 'your' and 'for' come to mind
– matpol
Apr 17 '13 at 13:06
I'm not sure if you are being bound by an angry project manager to not use tables, but sorry, if you want to build something that looks like a table then just build a table. Why div's and span's?
– ASouthorn
Apr 17 '13 at 13:08
2
Just an additional comment...who told you that not using a table would increase performance? That's not even remotely true.
– ASouthorn
Apr 17 '13 at 13:12
Tables elements is very heavy HTML element.
– Erik
Apr 17 '13 at 13:15
1
That's not true. They used to be heavy in the old days, where systems would build layouts based on tables inside of tables inside of tables inside of tables etc. Nowdays, just building a table to render a table is no different than using div's. In fact, based on your code, your method is actually a couple of bytes bigger than it would be with tables!
– ASouthorn
Apr 17 '13 at 13:20
|
show 5 more comments
use table etc tags - I think the words 'rod', 'back', 'own', 'your' and 'for' come to mind
– matpol
Apr 17 '13 at 13:06
I'm not sure if you are being bound by an angry project manager to not use tables, but sorry, if you want to build something that looks like a table then just build a table. Why div's and span's?
– ASouthorn
Apr 17 '13 at 13:08
2
Just an additional comment...who told you that not using a table would increase performance? That's not even remotely true.
– ASouthorn
Apr 17 '13 at 13:12
Tables elements is very heavy HTML element.
– Erik
Apr 17 '13 at 13:15
1
That's not true. They used to be heavy in the old days, where systems would build layouts based on tables inside of tables inside of tables inside of tables etc. Nowdays, just building a table to render a table is no different than using div's. In fact, based on your code, your method is actually a couple of bytes bigger than it would be with tables!
– ASouthorn
Apr 17 '13 at 13:20
use table etc tags - I think the words 'rod', 'back', 'own', 'your' and 'for' come to mind
– matpol
Apr 17 '13 at 13:06
use table etc tags - I think the words 'rod', 'back', 'own', 'your' and 'for' come to mind
– matpol
Apr 17 '13 at 13:06
I'm not sure if you are being bound by an angry project manager to not use tables, but sorry, if you want to build something that looks like a table then just build a table. Why div's and span's?
– ASouthorn
Apr 17 '13 at 13:08
I'm not sure if you are being bound by an angry project manager to not use tables, but sorry, if you want to build something that looks like a table then just build a table. Why div's and span's?
– ASouthorn
Apr 17 '13 at 13:08
2
2
Just an additional comment...who told you that not using a table would increase performance? That's not even remotely true.
– ASouthorn
Apr 17 '13 at 13:12
Just an additional comment...who told you that not using a table would increase performance? That's not even remotely true.
– ASouthorn
Apr 17 '13 at 13:12
Tables elements is very heavy HTML element.
– Erik
Apr 17 '13 at 13:15
Tables elements is very heavy HTML element.
– Erik
Apr 17 '13 at 13:15
1
1
That's not true. They used to be heavy in the old days, where systems would build layouts based on tables inside of tables inside of tables inside of tables etc. Nowdays, just building a table to render a table is no different than using div's. In fact, based on your code, your method is actually a couple of bytes bigger than it would be with tables!
– ASouthorn
Apr 17 '13 at 13:20
That's not true. They used to be heavy in the old days, where systems would build layouts based on tables inside of tables inside of tables inside of tables etc. Nowdays, just building a table to render a table is no different than using div's. In fact, based on your code, your method is actually a couple of bytes bigger than it would be with tables!
– ASouthorn
Apr 17 '13 at 13:20
|
show 5 more comments
3 Answers
3
active
oldest
votes
1
Try this instead your style:
.table .table-cell {
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
answered Apr 17 '13 at 13:16
Ali SeyfollahiAli Seyfollahi
7541620
add a comment |
1
Table cells can not be floatet. Remove float: left from the .table-cell like in this Fiddle:
.table .table-cell {
/* float: left; */
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
answered Apr 17 '13 at 13:10
Linus CaldwellLinus Caldwell
9,139123855
Thank you it works!
– Erik
Apr 17 '13 at 13:11
add a comment |
-2
Try below code
.table .table-cell {
float: left;
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
height: 100%;
}
answered Apr 17 '13 at 13:07
Manoj YadavManoj Yadav
1
It dosen't work jsfiddle.net/pAnnN/11
– Erik
Apr 17 '13 at 13:10
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f16060749%2fhow-to-set-height-to-fill-height-of-parent-node%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Try this instead your style:
.table .table-cell {
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
answered Apr 17 '13 at 13:16
Ali SeyfollahiAli Seyfollahi
7541620
add a comment |
1
Try this instead your style:
.table .table-cell {
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
answered Apr 17 '13 at 13:16
Ali SeyfollahiAli Seyfollahi
7541620
add a comment |
1
1
1
Try this instead your style:
.table .table-cell {
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
answered Apr 17 '13 at 13:16
Ali SeyfollahiAli Seyfollahi
7541620
Try this instead your style:
.table .table-cell {
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
answered Apr 17 '13 at 13:16
Ali SeyfollahiAli Seyfollahi
7541620
answered Apr 17 '13 at 13:16
Ali SeyfollahiAli Seyfollahi
7541620
answered Apr 17 '13 at 13:16
Ali SeyfollahiAli Seyfollahi
7541620
answered Apr 17 '13 at 13:16
Ali SeyfollahiAli Seyfollahi
7541620
7541620
add a comment |
add a comment |
1
Table cells can not be floatet. Remove float: left from the .table-cell like in this Fiddle:
.table .table-cell {
/* float: left; */
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
answered Apr 17 '13 at 13:10
Linus CaldwellLinus Caldwell
9,139123855
Thank you it works!
– Erik
Apr 17 '13 at 13:11
add a comment |
1
Table cells can not be floatet. Remove float: left from the .table-cell like in this Fiddle:
.table .table-cell {
/* float: left; */
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
answered Apr 17 '13 at 13:10
Linus CaldwellLinus Caldwell
9,139123855
Thank you it works!
– Erik
Apr 17 '13 at 13:11
add a comment |
1
1
1
Table cells can not be floatet. Remove float: left from the .table-cell like in this Fiddle:
.table .table-cell {
/* float: left; */
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
answered Apr 17 '13 at 13:10
Linus CaldwellLinus Caldwell
9,139123855
Table cells can not be floatet. Remove float: left from the .table-cell like in this Fiddle:
.table .table-cell {
/* float: left; */
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
}
answered Apr 17 '13 at 13:10
Linus CaldwellLinus Caldwell
9,139123855
edited Apr 17 '13 at 13:16
answered Apr 17 '13 at 13:10
Linus CaldwellLinus Caldwell
9,139123855
answered Apr 17 '13 at 13:10
Linus CaldwellLinus Caldwell
9,139123855
answered Apr 17 '13 at 13:10
Linus CaldwellLinus Caldwell
9,139123855
9,139123855
Thank you it works!
– Erik
Apr 17 '13 at 13:11
add a comment |
Thank you it works!
– Erik
Apr 17 '13 at 13:11
Thank you it works!
– Erik
Apr 17 '13 at 13:11
Thank you it works!
– Erik
Apr 17 '13 at 13:11
add a comment |
-2
Try below code
.table .table-cell {
float: left;
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
height: 100%;
}
answered Apr 17 '13 at 13:07
Manoj YadavManoj Yadav
1
It dosen't work jsfiddle.net/pAnnN/11
– Erik
Apr 17 '13 at 13:10
add a comment |
-2
Try below code
.table .table-cell {
float: left;
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
height: 100%;
}
answered Apr 17 '13 at 13:07
Manoj YadavManoj Yadav
1
It dosen't work jsfiddle.net/pAnnN/11
– Erik
Apr 17 '13 at 13:10
add a comment |
-2
-2
-2
Try below code
.table .table-cell {
float: left;
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
height: 100%;
}
answered Apr 17 '13 at 13:07
Manoj YadavManoj Yadav
1
Try below code
.table .table-cell {
float: left;
padding: 0 10px;
border: 1px solid #000;
display: table-cell;
height: 100%;
}
answered Apr 17 '13 at 13:07
Manoj YadavManoj Yadav
1
answered Apr 17 '13 at 13:07
Manoj YadavManoj Yadav
1
answered Apr 17 '13 at 13:07
Manoj YadavManoj Yadav
1
answered Apr 17 '13 at 13:07
Manoj YadavManoj Yadav
1
1
It dosen't work jsfiddle.net/pAnnN/11
– Erik
Apr 17 '13 at 13:10
add a comment |
It dosen't work jsfiddle.net/pAnnN/11
– Erik
Apr 17 '13 at 13:10
It dosen't work jsfiddle.net/pAnnN/11
– Erik
Apr 17 '13 at 13:10
It dosen't work jsfiddle.net/pAnnN/11
– Erik
Apr 17 '13 at 13:10
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f16060749%2fhow-to-set-height-to-fill-height-of-parent-node%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
use table etc tags - I think the words 'rod', 'back', 'own', 'your' and 'for' come to mind
– matpol
Apr 17 '13 at 13:06
I'm not sure if you are being bound by an angry project manager to not use tables, but sorry, if you want to build something that looks like a table then just build a table. Why div's and span's?
– ASouthorn
Apr 17 '13 at 13:08
2
Just an additional comment...who told you that not using a table would increase performance? That's not even remotely true.
– ASouthorn
Apr 17 '13 at 13:12
Tables elements is very heavy HTML element.
– Erik
Apr 17 '13 at 13:15
1
That's not true. They used to be heavy in the old days, where systems would build layouts based on tables inside of tables inside of tables inside of tables etc. Nowdays, just building a table to render a table is no different than using div's. In fact, based on your code, your method is actually a couple of bytes bigger than it would be with tables!
– ASouthorn
Apr 17 '13 at 13:20