css实现表格中最后一列固定

使用position: sticky;

这种方法适用于大多数现代浏览器,特别是当你想要固定列在滚动时。

html 复制代码
<style>
  .table-container {
    overflow-x: auto;
    width: 100%;
  }
  .table-container table {
    width: max-content;
    border-collapse: collapse;
  }
  .table-container th, .table-container td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  .table-container th:last-child, .table-container td:last-child {
    position: sticky;
    right: 0;
    background-color: white; /* 确保背景颜色与表格匹配 */
    z-index: 100; /* 确保在最上层 */
  }
</style>

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <!-- 更多列 -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
        <!-- 更多数据 -->
      </tr>
      <!-- 更多行 -->
    </tbody>
  </table>
</div>
相关推荐
IT_陈寒19 小时前
Redis的持久化配置把我坑惨了:你以为数据安全了?
前端·人工智能·后端
小徐_233319 小时前
uni-app 项目别再从零搭了!3 个 Wot UI 起手模板怎么选?
前端·uni-app
张元清19 小时前
React useResizeObserver Hook:追踪元素尺寸变化(2026)
javascript·react.js
赵庆明老师20 小时前
Vben精讲:16-熟悉Vite前端工具链
前端
瑞瑞小同学1 天前
处理echarts x轴内容过多,重叠问题
前端·javascript·echarts
HexCIer1 天前
面向未来的原子化 CSS:UnoCSS 核心架构分析与 Tailwind CSS 现状
前端·css·vite
程序员黑豆1 天前
鸿蒙应用开发中的单位详解:px、vp、fp、lpx
前端·harmonyos
像我这样帅的人丶你还1 天前
MCP + npm:给五年前的老系统接上AI
前端·javascript·agent
南一Nanyi1 天前
依赖注入和控制反转
前端·设计模式·nestjs
小村儿1 天前
连载14-实战篇--一个半月,我一个人和 Claude Code 搭出一套数字人工程
前端·后端·ai编程