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>
相关推荐
boooooooom5 分钟前
手把手做一个图 RAG 烹饪问答系统:Neo4j + Milvus + LLM 的工程实践
前端·javascript·后端
小小善后师5 分钟前
HID 设备对接技术解析:基于本地中间服务的 WebSocket 通信模式
前端
黄油面包7 分钟前
Codex 额度三天见底后,我重新做了一周预算
前端·人工智能
PedroQue9910 分钟前
v2.7.1:修复 H5 端返回死循环闪烁问题
前端·uni-app
coderCN12 分钟前
Nodejs express+knex(ORM框架)
前端·node.js
求道於盲16 分钟前
python中的抽象类
前端
Csvn26 分钟前
CSS 层叠与现代布局:BFC、@layer 与 grid/flex 的取舍
前端
CodeSheep36 分钟前
OpenJDK 全面禁止 AI 生成代码!
前端·后端·程序员
IT_陈寒1 小时前
为什么我的Vue组件总是莫名其妙重渲染?
前端·人工智能·后端
乘风gg1 小时前
企业级 AI Coding 的 Harness 工程实战:8 个 Skill 串起全链路
前端·ai编程·claude