table 固定表头

您可以使用 CSS 中的 position: sticky 属性来实现固定表头。例如：

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

thead {
  position: sticky;
  top: 0;
  background-color: #fff;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;}

这样就可以实现表头固定在页面顶部了。

相关问题

antd table 固定表头

要在 Ant Design 的 Table 组件中固定表头，可以使用 `scroll` 属性来实现。具体步骤如下：

1. 设置表格的 `scroll` 属性，包括设置 `x` 和 `y` 的值，以及 `scrollToFirstRowOnChange` 属性。

<Table
  dataSource={dataSource}
  columns={columns}
  scroll={{ x: 'max-content', y: 300, scrollToFirstRowOnChange: true }}
/>

2. 在表格的 `columns` 属性中，为每一列设置 `fixed` 属性，可以选择 `left`、`right` 或 `true`。`true` 表示该列不会随着滚动而移动。

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 150,
    fixed: 'left',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 150,
  },
  // ...
];

以上就是固定表头的实现方法。需要注意的是，当表格的宽度超过 `scroll.x` 指定的宽度时，表格会出现横向滚动条。为了避免表头和表格内容错位，可以将 `x` 的值设置为 `'max-content'`。同时，为了保证滚动时第一行的数据不被表头遮挡，需要将 `scrollToFirstRowOnChange` 属性设置为 `true`。

bootstrap table固定表头

要在 Bootstrap Table 中固定表头，可以使用插件 `bootstrap-table-fixed-header`。以下是实现步骤：

1. 引入必要的文件：`jquery.min.js`、`bootstrap.min.css`、`bootstrap.min.js`和`bootstrap-table-fixed-header.min.js`。

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table-fixed-header/1.5.1/bootstrap-table-fixed-header.min.js"></script>

2. 在表格中添加 `thead` 元素，并为表格添加 `data-fixed-header="true"` 属性。

<table id="table" data-fixed-header="true">
  <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>项目1</td>
      <td>这是项目1的描述</td>
    </tr>
    <tr>
      <td>2</td>
      <td>项目2</td>
      <td>这是项目2的描述</td>
    </tr>
    <tr>
      <td>3</td>
      <td>项目3</td>
      <td>这是项目3的描述</td>
    </tr>
  </tbody>
</table>

3. 初始化表格并调用 `fixedHeader` 方法。

$(function() {
  $('#table').bootstrapTable();
  $('#table').fixedHeader();
});

这样就可以实现表格的固定表头效果了。需要注意的是，如果表格中有合并单元格的情况，这种方法可能会失效。