table原生固定表头和固定列实现

最新推荐文章于 2024-06-11 16:31:10 发布
最新推荐文章于 2024-06-11 16:31:10 发布
阅读量1.5k 收藏 7
点赞数 3
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41691488/article/details/132447546
版权
博客包含前端相关内容，有效果图展示，还给出了JavaScript和HTML代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>固定表格行、列</title>
  <style>
    .main {
      width: calc(100vw - 2rem);
      height: 200px;
      overflow: auto;
    }

    th, td {
      width: 400px;
      border: 1px solid gray;
      text-align: center;
      height: 35px;
    }

    table {
      table-layout: fixed;
      width: 200px;
    }

    thead tr th {
      position: sticky;
      top: 0;
      background: wheat;
      height: 42px;
    }

    th:nth-child(1), th:nth-child(2), th:nth-child(3) {
      width: 60px;
      position: sticky;
      left: 0px;
      z-index: 2;
    }
    th:nth-child(1) {
      left: 0px;
    }
    th:nth-child(2) {
      left: 64px;
    }

    th:nth-child(3) {
      width: 200px;
      left: 128px;
    }

    td:first-child {
      position: sticky;
      left: 0px;
      z-index: 2;
      background: #00a0e9;
    }

    th:first-child {
      z-index: 33;
    }
  </style>
</head>
<body>
<div class="main">
  <table cellspacing="0">
    <thead>
    <tr>
      <th></th>
      <th><input type="checkbox"></th>
      <th>时间</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    </tbody>
  </table>
</div>
</body>
</html>

 

柠凉゜
关注
前端：普通表格固定行列
weixin_46001736的博客
04-01 1049
前端：普通表格固定行列
原生 js、html 写一个有固定列滚动的 table
hello，是翠花呀
08-25 3259
像 element-ui 和 ant-ui 这些 UI 库他们提供的 table 组件都是可以设置固定列的，比如左边固定则滚动的时候左边不会随着滚动而看不见，右边固定则右侧一列是固定住不动的。 接下来直接用 html 和 js 来尝试一下这种 table 的效果。 - 一：固定列 这里我想使用`position: sticky;`直接达到相对 table 列的固定效果，不需要改变 dom 的结构。 - 二：阴影 阴影的效果是，当 table 往右边滚，则左固定列显示阴影效果；当 table 往
关于如何使用原生实现表格固定列，纯 CSS 实现
thirteen_king13的博客
08-13 1814
在使用 HTML 的表格标签时，当表格项过多时，左右拉动时，希望固定几列不随水平滚动条滚动，表头也不随竖直方向滚动而滚动。在使用组件库的时候，通常都有成熟的API。 思路一： 是在查找资料中发现的，创建多个 table 将首尾需要固定的列使用单独的表格，然后对需要固定的列所在表格添加position: absolute，本人想通过一个表格实现，未使用该方法。 思路二： 通过position: sticky 实现 ...
table固定表头和列头
12-15
固定表头和列头
Table固定列和表头
默存
11-05 3244
一、实现思路：表格数据中存在合并单元格，网上找了好多列子都没有实现。最后是把一个table拆分为两个table实现的，第一个table（table1）中是需要固定的列及表头（表头只固定前四列和时段流量列，时间列是不固定的），第二个table（table2）是所有的数据，把table1定位在table2的上面。 二、效果图 三、代码 <!DOCTYPE html> <h...
原生table 固定表头笔记
qq_38388578的博客
10-09 572
【代码】原生table 固定表头笔记。
原生列表table固定表头
千山雪的博客
12-07 2357
原生列表table固定表头 将 table 的 thead 和 tbody 拆分成两个表格，用 div 包起来，给 div 设置固定高度和 overflow: auto; 属性（其实只给 tbody 的 table 包上 div 就可以）。 <table class="bordered tTable"> <thead> ...
原生table表头固定，内容滚动
weixin_45735694的博客
02-17 1039
HTML： <div style="width: 1200px;margin: 0 auto;"> <div class="table-head"> <table> <colgroup> <col style="width: 100px;" /> <col />
bootstrap-table实现表头固定以及列固定的方法示例
10-17
这样即使用户滚动页面查看表格内容时，固定的表头或列依然可见，方便用户快速识别数据所在的列和行。 首先，要使用bootstrap-table实现表头固定以及列固定的功能，需要引入对应的JavaScript和CSS文件。这包括jQuery...
JS实现table表格固定表头且表头随横向滚动而滚动
10-19
以上是对于JS实现table表格固定表头且表头随横向滚动而滚动相关知识点的总结和解析。希望对理解和实现类似效果有所帮助。如果遇到疑问，可通过留言形式寻求帮助，作者承诺会及时回复。同时，对于支持网站和分享知识...
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
table固定表头和指定列
06-20
table 固定指定的列 以及表头 有实现例子
js实现table行列固定
07-29
引用JS,固定table的前n行及前n列， @*表格冻结*@ [removed] $(function () { $(".fixTable").tableHeadFixer({ "left": 0 }); $(".fixTable").tableHeadFixer({ "top": 1 }); }); [removed]
基于jquery的固定html table表头/列头插件 （加强版）
10-06
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）。第一版仅支持所固定列数自定义，本加强版新增所固定行数自定义。
asp.net html+table固定表头和左侧列.rar
08-20
在这个“asp.net html+table固定表头和左侧列.rar”压缩包中，我们聚焦的是如何在HTML表格（Table）中实现固定表头（Fixed Header）和左侧列（Fixed Left Column）的功能，以便在用户滚动页面时，这些关键信息始终...
JS固定表头和左边列V2.0（源码）
07-31
修正表头列未锁定的Bug 1.8 修正表格含有thead时的样式丢失问题，以及行数设置问题，修正thead/tbody行归属问题 1.9 移除tb_top_left的底部边框线 修正表格cellpadding/cellspacing的设置问题 修复Firefox下的...
复杂表头固定表头和列.html
04-29
复杂表头固定行，固定列，纯css实现，样式可修改，可根据自己要求，更改表头，以及固定列的数量，本人亲测，确实好用
原生js写table表格固定表头
最新发布
weixin_56381842的博客
06-11 531
原生js写table表格固定表头
原生JS实现表格固定表头与列功能
根据提供的文件信息，本节将详细阐述有关JavaScript实现表格固定表头和固定左边列的知识点。具体将围绕原生JS代码实现固定表头及左边列的原理、兼容性问题以及代码实现和常见BUG的解决方法等展开。 ### 知识点一：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值