table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法

要实现table表格，让thead固定，tbody有滚动条，并且让它们的对齐，可以使用纯CSS来实现。首先，我们可以使用position: sticky;来让thead固定在顶部，然后设置overflow-y: scroll;来给tbody添加垂直滚动条。另外，为了保持它们的对齐，可以使用display: block;来使table元素变成块级元素，然后设置其宽度为100%，这样就可以确保thead和tbody的宽度一致。接下来，给tbody设置max-height来限制高度，当内容超出时才会出现滚动条。

下面是一个简单的示例：

table {
  display: block;
  width: 100%;
}
thead {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
}
tbody {
  display: block;
  max-height: 200px; /* 设置最大高度 */
  overflow-y: auto; /* 添加滚动条 */
}
td, th {
  padding: 8px;
  text-align: left;
}

这样就可以实现一个table表格，让thead固定，tbody有滚动条，并且它们的对齐方式是一致的纯CSS写法。

相关问题

bootstrap table thead固定，tbody垂直滚动条

要实现 Bootstrap Table 的表头固定，而表体（tbody）部分带有垂直滚动条，可以通过以下步骤完成：

1. 在表格外层添加一个 div 容器，并设置样式 position: relative。
2. 在 div 容器内部添加一个固定位置的表头（thead）元素，并设置样式 position: absolute 和 top: 0。
3. 在 div 容器内部再添加一个滚动容器（overflow: auto），并将表体（tbody）元素放置其中。
4. 设置滚动容器的高度（height），使其可以出现垂直滚动条。
5. 在表格中设置固定宽度（width），以保证表头和表体的列宽一致。

以下是一个示例代码：

<div style="position: relative;">
  <table class="table" style="width: 100%;">
    <thead style="position: absolute; top: 0;">
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
  </table>
  <div style="height: 200px; overflow: auto;">
    <table class="table" style="width: 100%;">
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
        <!-- more rows... -->
      </tbody>
    </table>
  </div>
</div>

请注意，以上示例代码仅供参考，具体实现方式可能因为 Bootstrap Table 的版本和样式等因素而有所不同。

thead固定 tbody滚动

实现thead固定，tbody滚动的方式可以通过以下步骤：

1. 给tbody设置固定高度和overflow-y属性为scroll，使得tbody可以滚动。

2. 将thead的样式设置为position:fixed，使得它可以固定在表格顶部。

3. 给tbody中的每一行tr设置相同的宽度，以保证表格的列宽一致。

4. 如果需要，可以使用JavaScript来动态计算表格头部的宽度，并将其应用于tbody的每一行。

以下是一个示例代码：

HTML代码：

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    <!-- more rows... -->
  </tbody>
</table>

CSS样式：

table {
  border-collapse: collapse;
  width: 100%;
}

thead {
  position: fixed;
  top: 0;
}

tbody {
  height: 300px;
  overflow-y: scroll;
}

tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  /* Optional: set font-size, line-height, etc. */
}

JavaScript代码（可选）：

// Dynamically set the width of the table header cells
const ths = document.querySelectorAll('thead th');
const trs = document.querySelectorAll('tbody tr');

for (let i = 0; i < ths.length; i++) {
  const thWidth = ths[i].getBoundingClientRect().width;
  for (let j = 0; j < trs.length; j++) {
    trs[j].querySelectorAll('td')[i].style.width = thWidth + 'px';
  }
}