html - 为什么html表格有多个列的数据到一列

Question

我想要一个带有 scrollbar 的 html 表格，我制作了一个可滚动表格示例，但问题是所有列数据都适合一列，如此处所示。

http://jsfiddle.net/bqtzykuj/4/

在这个例子中，css是

<tbody style="height: 350px; max-height: 400px;overflow-y: scroll;display:block;">

但是，如果我删除 display:block，前面描述的问题就消失了，但滚动条也消失了。 http://jsfiddle.net/bqtzykuj/5/

Answer 1

您还需要将 display: block; 添加到 thead 中。它会起作用。

检查这里: http://jsfiddle.net/3x27f6by/

这里的工作片段:

table {
  border: 1px solid black;
}

thead {
  display: block;
}

th,
td {
  text-align: center;
  width: 100px;
  box-sizing: border-box;
}

<table class="table table-hover">
  <thead class="text-warning">
    <th>price</th>
    <th>amount</th>
    <th>total</th>
  </thead>
  <tbody style="height: 350px; max-height: 400px;overflow-y:auto; display:block;">

    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
  </tbody>
</table>

为 th 和 td 添加以下样式以使其看起来更好:

th,
td {
  text-align: center;
  width: 100px;
  box-sizing: border-box;
}