Question

为什么height =“100％”属性无法在以下代码段中使用？

<table height="100%" width="100%">

修改：代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<div style="width:250px;height:90px;">

<table id="experiences-mirror" width="100%" border="1" cellpadding="0" height="100%">
    <caption>Table Name</caption>
    <tbody><tr><th>Company</th><th>Job Title</th><th>Industry</th><th>Job Function</th><th>Start Date</th><th>End Date</th></tr>
    <tr title="hint">
        <td><input name="company1" class="w100" type="text"></td><td><input name="jobTitle1" class="w100" value="" type="text"></td><td><input name="industry1" class="w100" value="" type="text"></td><td><input name="jobFunction1" class="w100" type="text"></td><td><input name="startDate1" class="w100" type="text"></td><td><input name="endDate1" class="w100" type="text"></td>
    </tr>
    <tr title="hint">
        <td><input name="company2" class="w100" type="text"></td><td><input name="jobTitle2" class="w100" type="text"></td><td><input name="industry2" class="w100" type="text"></td><td><input name="jobFunction2" class="w100" type="text"></td><td><input name="startDate2" class="w100" type="text"></td><td><input name="endDate2" class="w100" type="text"></td>
    </tr>
    <tr title="hint">
        <td><input name="company3" class="w100" type="text"></td><td><input name="jobTitle3" class="w100" type="text"></td><td><input name="industry3" class="w100" type="text"></td><td><input name="jobFunction3" class="w100" type="text"></td><td><input name="startDate3" class="w100" type="text"></td><td><input name="endDate3" class="w100" type="text"></td>
    </tr>
    <tr title="hint">
        <td><input name="company4" class="w100" type="text"></td><td><input name="jobTitle4" class="w100" type="text"></td><td><input name="industry4" class="w100" type="text"></td><td><input name="jobFunction4" class="w100" type="text"></td><td><input name="startDate4" class="w100" type="text"></td><td><input name="endDate4" class="w100" type="text"></td>
    </tr>
</tbody></table>

</div>

Answer 1

问题是你的桌子的计算高度已经大于90px。我把它提高到290px并且你的代码工作正常。

然而，设置高度的首选方法是通过CSS，例如：

#experiences-mirror {
 width: 100%;
 height: 100%;
}

Answer 2

可能是因为table-layout CSS属性。通常，如果表格是自动布局，那么无论您在<table>标记中放置什么内容，它都会根据内容自行调整大小。表格渲染算法充其量是复杂的。

最好的办法是确保你的桌子是固定的布局，然后确保第一排TD元素有固定的宽度。否则，您将遇到许多问题，包括许多特定于浏览器的问题。

Answer 3

原因很简单：table元素没有height属性。

如果要在表格上设置高度，则必须使用CSS：

style="height:100%;"

表里面的div，但仍高于父div

3 个答案: