Question

我有一个大的html表（超过3000个元素），但显然我不想一次显示所有这些。将显示部分表格，但大部分表格都将包含在滚动的小方框中。我想要一个类似于本网站使用的表：stackoverflow search table。我尝试做类似我的代码不起作用的东西：这是一个示例表：

＆＃13;

.table {
  height: 150px;
  overflow-y: scroll;
  overflow-x: hidden;
}

＆＃13;

<table id="myTable" class="table">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
</table>

＆＃13;

滚动条永远不会出现在表格的一侧。我相对较新的HTML

Answer 1

<table>元素不尊重溢出属性。通过将表设置为阻止来强制溢出属性：

.table {
  display: block;
  height: 150px;
  overflow-y: scroll;
  overflow-x: hidden;
}

<table id="myTable" class="table">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
</table>

如果表格很大，您可以从Same question带来的额外内容中受益：）

Answer 2

将它放在div容器中。

.container {
  border: 1px solid #C0C0C0;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100px;
}

<div class="container">
  <table>
    ...
  </table>
</div>

https://codepen.io/anon/pen/NpmPOy

Answer 3

尝试将表包装在div标签中，将类应用于该div。为了使滚动条实际显示，考虑到表中的条目数，您还需要稍微降低表的高度：

＆＃13;

.table {
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}

＆＃13;

<div class="table">
    <table id="myTable" class="table">
      <tr class="header">
        <th style="width:60%;">Name</th>
        <th style="width:40%;">Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Berglunds snabbkop</td>
        <td>Sweden</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Koniglich Essen</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Germany</td>
      </tr>
    </table>
</div>

＆＃13;

如何使用滚动创建一个html表

3 个答案: