html - 显示为 : block properties, 的表我想将行宽创建为 100%，但不起作用

Question

我正在尝试在 CSS 中创建一个具有 y 滚动属性的固定高度的表格。唯一的问题是当我设置时:

display: block;

然后:

width: 100%;

不再有效了。

<table class="table table-hover table-bordered table-condensed">
    <thead style="display: block;">
        <tr>
            <th style="text-align: center; width: 100%;">  <!-- THIS DOESN'T WORK -->
                PLAYS
            </th>
        </tr>
    </thead>
    <tbody style="display: block; overflow-y: auto;" height="465px;">
        <tr ng-repeat="play in playsArray" ng-click="onSelectPlayTableClick(play)" ng-class="{'tr-rcsorange-selected': play.Selected == true}" style="cursor:pointer;">
            <td>{{play.PlayDescription}}</td>
        </tr>
    </tbody>
</table>

Answer 1

要溢出表格，您需要先杀死表格布局属性:

table, thead,tbody,tr {
  display:block;
  width:100%;
}

然后在 HTML 中更深入地恢复它:

tr {
  display:table;
  table-layout:fixed;
}

从这里开始，可以使用滚动:

tbody {
  height:100px;
  overflow:auto;
}

下面是完整的代码片段/代码

table,
thead,
tbody,
tr {
  display: block;
}
thead {
  margin-right:1em;
  }
tr {
  display: table;
  table-layout: fixed;
  width:100%;
}
tbody {
  height: 100px;
  overflow: auto ; /* eventually : scroll;*/
}
table,
th,
td {
  border: solid;
}

<table>
  <thead>
    <tr>
      <th>head
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
</table>

在类似问题中对基本代码的更多解释How to set tbody height with overflow scroll