Question

我有一张桌子，但它不是100％而且它的大小是：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，这是错误的。

Html表tbody不是100％

1 个答案: