给桌子一个固定的高度？答案

【问题标题】：Give a table a fixed height?给桌子一个固定的高度？
【发布时间】：2018-02-04 05:14:15
【问题描述】：

我正在尝试让我的桌子固定高度 - 我最终会使用溢出来滚动。但是我的身高被忽略了。

CSS：

table {
    height: 20px;
}

HTML：

<table>
    <tr>
        <td>
            hello
            ......

【问题讨论】：

尝试在 Chrome 开发工具中查看应用到元素的样式。 CSS 的特殊性值得一读。
样式被应用到表格元素，只是不起作用。
在桌子上使用display:inline-block
正如精神评论所说，该表需要一个特定的显示，例如（内联）块与溢出（-y）设置一起。在此 SO 帖子中也提到：stackoverflow.com/questions/8970362/…。话虽如此，只是想提一下，研究 flexbox 或其他替代布局可能比为布局目的调整表格更容易

标签： html css

【解决方案1】：

https://jsfiddle.net/hop061md/

在桌子上使用display:inline-block。

table {
  max-height: 20px;
  display: inline-block;
  overflow: auto;
  background: red;
}

<table>
  <tr>
    <td>
      hello
    </td>
  </tr>
  <tr>
    <td>
      hello
    </td>
  </tr>
  <tr>
    <td>
      hello
    </td>
  </tr>
  <tr>
    <td>
      hello
    </td>
  </tr>
  <tr>
    <td>
      hello
    </td>
  </tr>
  <tr>
    <td>
      hello
    </td>
  </tr>
</table>

【讨论】：

【解决方案2】：

overflow 属性仅适用于block 元素...而table 默认显示属性为display:table...

所以我认为将table 设置为display:block 不是一个好主意...

所以只需将您的table 包装成div，然后应用height 和overflow:auto

堆栈片段

div {
  height: 50px;
  overflow: auto;
}

table {
  border-collapse: collapse;
  font: 13px Verdana;
}

td {
  border: 1px solid #ccc;
  padding: 3px 10px;
}

<div>
  <table>
    <tr>
      <td>
        hello
      </td>
    </tr>
    <tr>
      <td>
        hello
      </td>
    </tr>
    <tr>
      <td>
        hello
      </td>
    </tr>
    <tr>
      <td>
        hello
      </td>
    </tr>
    <tr>
      <td>
        hello
      </td>
    </tr>
    <tr>
      <td>
        hello
      </td>
    </tr>
  </table>

</div>

【讨论】：