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

替换

#tasks tr {
  display: block;
}

使用

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

https://jsfiddle.net/5nt18cL0/

Answer 2

请考虑以下代码段，没有直接解决您的问题的方法，这由“表”功能决定。当前主流框架的解决方案如下，您需要设置“列”的宽度。

* {
  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，查看表元素。

如何将滚动条仅添加到主体而不固定thead

2 个答案: