html - Thead中具有多行的粘滞头表

因此，我能够创建一个粘性头表，并且工作正常。问题是，我需要用多行标题制作另一个表，并且到目前为止，我使用的方法不起作用，如下面的代码所示。

.table-wrapper {
  position: relative;
  overflow-y: auto;
  height: 200px;
  width: 200px;
}

table {
  border: 1px solid #DDD;
  vertical-align: middle;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0
}

table tr th,
table tr td{
  border: 1px solid #DDD;
  background-color: #FFF;
  padding: 4px;
}

table thead tr th {
  position: sticky;
  top: 0;
}

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th rowspan="2">
          Header
        </th>
        <th colspan="2">Colspan column</th>
      </tr>
      <tr>
        <th>
          A
        </th>
        <th>
          B
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Line 1</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 2</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 3</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 4</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 5</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 6</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 7</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 8</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 9</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 10</td>
        <td>a</td>
        <td>b</td>
      </tr>
    </tbody>
  </table>
</div>

是否可以仅使用CSS达到我想要的？

这是笔https://codepen.io/criscoder/pen/KJNGqj

最佳答案

您就快到了，您可以简单地在<th>中嵌入一个表格，然后添加其他行。

.table-wrapper {
  position: relative;
  overflow-y: auto;
  height: 200px;
  width: 200px;
}

table {
  border: 1px solid #DDD;
  vertical-align: middle;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0
}

table tr th,
table tr td{
  border: 1px solid #DDD;
  background-color: #FFF;
  padding: 4px;
}

table thead tr th {
  position: sticky;
  top: 0;
}

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th rowspan="2" colspan="1">
          Header
        </th>
        <th rowspan="2" colspan="2">
        <table>
        <tr>
          <td colspan="2">Colspan column</td>
        </tr>
        <tr>
          <td colspan="1">A</td>
          <td colspan="1">B</td>
        </tr>
        </table>
        </th>
      </tr>

    </thead>
    <tbody>
      <tr>
        <td>Line 1</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 2</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 3</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 4</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 5</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 6</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 7</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 8</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 9</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 10</td>
        <td>a</td>
        <td>b</td>
      </tr>
    </tbody>
  </table>
</div>

关于html - Thead中具有多行的粘滞头表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54444642/