如何实现表格固定表头且仅页面显示滚动条（移除表格滚动条）

要实现固定表头、水平溢出时显示页面滚动条而非表格自身滚动条，调整方式如下：

关键修改点 #

• 移除容器的滚动类：删掉table-responsive（该类会给容器添加overflow-x: auto，导致表格自身出现滚动条）和h-screen（限制容器高度为屏幕高度，阻碍页面自然滚动）。
• 优化表头粘性显示：给<thead>或<tr>添加背景色类（如bg-light），避免滚动时tbody内容穿透表头。
• 修复HTML结构错误：原代码中<thead>内多了一个冗余的</th>，需删除以保证结构合法。

修改后的完整代码 #

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<div>
  <Table className='table-flush align-middle' hover>
    <thead className='thead-light bg-light'>
      <tr className='sticky top-0'>
        <th className='px-2 text-left' data-sort='name' scope='col'>
          <CampaignListTitle title='ID' keyword='id' />
        </th>
        <th className='max-w-lg px-2 text-left' data-sort='name' scope='col'>
          <CampaignListTitle title={translation.CAMPAIGN__CAMPAIGN_NAME} keyword='name' />
        </th>
      </tr>
    </thead>
    <tbody className='list'>
      {campaigns.map(campaign => (
        <tr key={campaign.id}>
          <td className='text-xs'>
            <div>{campaign.id}</div>
          </td>
          <td className='text-xs'>
            <div className='w-[30rem] whitespace-normal'>
              <div>{campaign.name}</div>
            </div>
          </td>
        </tr>
      ))}
    </tbody>
  </Table>
</div>

额外说明 #

• 表格数据循环渲染时，务必给<tr>添加唯一key属性，符合React组件渲染规范。
• 表头的sticky top-0依赖元素的定位上下文，确保没有父容器设置overflow: hidden或transform等会破坏粘性定位的属性。

内容的提问来源于stack exchange，提问作者Arpit