Html Table tbody 不是 100%

Question

我有一张桌子，但它不是 100%，它的 tbody 尺寸是：485x170px，

有人可以帮我把这个身体做到 100% 吗？

<thead> needs to be fixed as now.

我需要 scrool 并且 tbody 需要保持以下大小：height: calc(100vh - 513px); click to see the image

jsfiddle：https://jsfiddle.net/ab1Lsn0h/2/

css:

.staff table tbody {
  overflow-y: scroll;
  display: block;
  height: calc(100vh - 513px);
}

.staff tbody > tr {
  display: table;
  width: 100%;
}

html:

<div class="col-md-4">
  <div class="panel panel-default staff">
    <div class="panel-heading">test</div>
    <div class="panel-body">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Surname</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>name 1</td>
            <td>name 2</td>
          </tr>
          <tr>
            <td>name 1</td>
            <td>name 2</td>
          </tr>
          <tr>
            <td>name 1</td>
            <td>name 2</td>
          </tr>
          <tr>
            <td>name 1</td>
            <td>name 2</td>
          </tr>
          <tr>
            <td>name 1</td>
            <td>name 2</td>
          </tr>

        </tbody>
      </table>
      <div class="clearfix"></div>
    </div>
  </div>
</div>

Answer 1

您必须删除您的display: block; 和display: table;。

你在表格中转换tr，这是错误的。