Question

这是我的DOM：

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

和我的CSS：

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

我想要做的是使用百分比重新调整TD元素的高度和宽度。但是这段代码不起作用。我知道子元素的大小将继承它的父元素的大小。因此，TD将继承TABLE的大小，然后TABLE或BODY个父元素的HTML。我的代码不这样做。但如果我在width: 10%;上TABLE，则它会获得BODY/HTML元素宽度的10％。与height: 10%相同。但为什么它不适用于TD标签？

Answer 1

td标记被强制占用其父级中的所有剩余空间。

因此，布局完全忽略了您的width: 10%;。

请参阅此非工作JSFiddle Demo。

但是，如果我们向display: inline-block;添加一些td，那么就可以解决问题。

查看此（现在）工作JSFiddle Demo。

Answer 2

我建议你添加另一个td标签，并给它一个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%;
}

对于高度，您需要添加另一个tr行，并给它90％。将第一行的高度设为10％，就像您想要使用td - http://jsfiddle.net/R5uRW/6/

一样

子元素的宽度或高度在CSS中不会改变

2 个答案: