为什么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/

在这里工作 sn-p：

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

Answer 2

用display: table-row-group;代替display: block;

为了让元素以表格的形式发挥作用/显示：

• 表格单元格<td> 要求父级为display: table; 或display: table-cell;
• 这也适用于表行<tr>，它要求父级为display:table; 或display:table-row-group;

在您的情况下，您将<tr> 的父级更改为display:block;，这意味着子级<tr> 节点将不会以正确的表格格式呈现，因为父级不是display: table; 或display: table-row-group;