0

Here is my DOM:

<html>
<body>
<table>
<tr>
<td>
hello
</td>
</tr>
</table>
</body>
</html>

and my CSS:

    html, body {
        height: 100%;
        width: 100%;
    }
    table {
        height: 100%;
        width: 100%;
    }
    td {
        border: 1px solid gray;
        height: 10%;
        width: 10;
    }

What I want to do is to re-size the height and width of the TD element using percentage. But this code doesn't work. I understand that the size of a child element will inherit the size of it's parent element. So TD will inherit the size from TABLE and then TABLE from BODY or HTML parent elements. My code doesn't do that. But if I do width: 10%; on TABLE, then it gets 10% of the width of the BODY/HTML element. Same as with the height: 10%. But why doesn't it work on TD tag?

2 Answers 2

3

td tags are forced to take up all of the remaining space in their parent.

So, your width: 10%; is completely ignored by the layout.

See this non-working JSFiddle Demo.

But, if we add some display: inline-block; to the td, then it fixes the problem.

See this (now) working JSFiddle Demo.

0
1

I suggest you add another td tag, and give it a width of 90%

<table>
<tr class="tr1">
<td class=td1>
hello
</td>
<td class="td2"></td>
</tr>
<tr class="tr2">
<td></td>
</tr>
</table>

CSS:

html, body {
    height: 100%;
    width: 100%;
    margin:0;
}
table {
    height: 100%;
    width: 100%;
}
td.td1 {
    border: 1px solid gray;
    height: 10%;
    width: 10%;
}
td.td2{
    border: 1px solid gray;
    width: 90%;
}
tr.tr1{
    height:10%;
}
tr.tr2{
    height:90%;
}

For the height, you will need to add another tr row, and give it a 90%. Give the first row a 10% height like you wanted to do with the td - http://jsfiddle.net/R5uRW/6/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.