给桌子一个固定的高度？

Question

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

Here's a fiddle.

CSS：

table {
    height: 20px;
}

HTML：

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

Answer 1

https://jsfiddle.net/hop061md/

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

所以只需将table打包到div，然后应用height和overflow:auto

Stack Snippet

＆＃13;

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;