【问题标题】: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;
        }
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2021-03-14
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-06-03
          • 1970-01-01
          相关资源
          最近更新 更多