如何仅将滚动条添加到 tbody 而不是固定 thead

Question

我正在尝试创建一个具有可滚动<tbody> 和固定<thead> 的表。我在这里实现了https://jsfiddle.net/ghnfzwm6/16/。

但是，这并不是我想要的。我希望滚动条从 <tbody> 开始的地方开始。我试图通过添加来做到这一点

height: 546px;
max-height: 546px;
overflow-y: scroll; /* only Y axis scroll */

到<tbody> 并将其从#tasks-table-wrapper 中删除。我还做了<tbody>和<tr>display: block;

这是结果https://jsfiddle.net/4gLwp697/3/。现在的问题是<thead> 与<tbody> 不一致。我可以通过指定列宽来解决这个问题，但我希望它们是自动的。

我该如何解决这个问题？

Answer 1

考虑这段代码sn-p，没有直接解决你的问题，这是由'table'特性决定的。目前主流框架的解决方案如下，需要设置'columns'的宽度。

* {
  margin: 0;
  padding: 0;
}

#content {
  overflow: hidden;
  height: 100%;
  text-align: center;
}

#tasks-table-wrapper {
  text-align: left;
  display: inline-block;
  width: auto;
}
.scrollbar-wrap {
  overflow: auto;
  height: 100px;
}
.black-table {
  border-collapse: separate;
  font-size: 0;
  background-color: #121212;
  text-transform: uppercase;
  border-spacing: 0;
}

.black-table td {
  color: #bbb;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 15px 30px;
}
.black-table th {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 15px 25px;
  border-bottom: 1px solid #1c1c1c;
  position: sticky; /* keep TH on top */
  top: 0;
  background-color: #121212;
  white-space: nowrap;
}

<div id="content">
  <div id="tasks-table-wrapper">
    <table class="black-table">
        <colgroup>
          <col width="180">
          <col width="180">
          <col width="180">
          <col width="180">
        </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </thead>
    </table>
    <div class="scrollbar-wrap">
      <table class="black-table">
        <colgroup>
          <col width="180">
          <col width="180">
          <col width="180">
          <col width="163">
        </colgroup>
        <tbody>
          <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
            <td>DDD</td>
          </tr>
          <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
            <td>DDD</td>
          </tr>
          <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
            <td>DDD</td>
          </tr>
          <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
            <td>DDD</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

可以看到VUE Table with fixed header，查看表格元素。

Answer 2

替换

#tasks tr {
  display: block;
}

与

#tasks tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

https://jsfiddle.net/5nt18cL0/