在 HTML 中设置表格的高度没有效果答案

【问题标题】：Setting the height of a table in HTML has no effect在 HTML 中设置表格的高度没有效果
【发布时间】：2019-10-28 16:09:41
【问题描述】：

为什么这个桌子高度不起作用？

<table border=1 bgcolor="green" width=80% height="30%">
    <tr>
        <td rowspan="2" >
            This is 1st row 1st column
        </td>
        <td >
            2
        </td>
    </tr>
</table>

http://jsfiddle.net/zQNS4/

【问题讨论】：

标签： html css html-table

【解决方案1】：

只需将以下内容添加到您的 css 中：

html, body{
    height: 100%;
}

正如其他人所说，table 没有height-attriute，但大多数浏览器无论如何都会暗示这一点。你可以看到the result on jsfiddle。

您需要这样做的原因是，任何应该有 % 高度的东西的父元素也必须有一个高度（正如 Shadow Wizard 所说：“确切地说是什么的 30%？” - 父元素必须有一个高度）。

【讨论】：

【解决方案2】：

table 标记不包含height 属性。尝试使用 CSS 样式设置表格的高度。

table{
   height: 30%;
}

【讨论】：

【解决方案3】：

<div style="height: 200px; overflow-y: scroll;">
    <table border=1 bgcolor="green">
        <tr>
            <td rowspan="2" >
                This is 1st row 1st column
            </td>
            <td>
                 2
            </td>
        </tr>
   </table>
</div>

【讨论】：

代码示例很好，但是您的代码如何解决问题？为什么原来的代码不起作用？

【解决方案4】：

我也遇到了同样的问题。我在容器内有桌子（ div config-table ），只是设置 height 对我不起作用。我必须设置overflow: auto（我的情况需要auto）然后开始工作

.config-table {
   height: 350px;
   overflow: auto;
}

【讨论】：