html中固定table的首行和首列

最新推荐文章于 2023-05-30 14:31:47 发布
最新推荐文章于 2023-05-30 14:31:47 发布
阅读量3.6k 收藏 2
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhy1006894859/article/details/89494361
版权

见代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        body {
            background: #FFFFFF; }
        body .table_div_wrap {
            border: 1px red solid;
            background: #f0f0f0;
            width: 80%;
            min-width: 320px;
            max-width: 600px;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
            overflow: hidden; }
        body .table_div_wrap .inner .table_tbody {
            width: 100%;
            height: 300px;
            overflow-y: auto;
            overflow-x: auto; }
        body .table_div_wrap .inner table {
            min-width: 100%; }
        body .table_div_wrap .inner table td, body .table_div_wrap .inner table th {
            border-top: 1px black solid;
            border-right: 1px black solid;
            min-width: 150px;
            height: 80px; }
        body .table_div_wrap .inner table th {
            border: none;
            border-right: 1px black solid;
            height: 30px; }
        body .table_div_wrap .outer {
            position: absolute;
            top: 0;
            left: 0; }
        body .table_div_wrap .outer .table_tbody {
            width: 100%;
            height: 300px;
            overflow-y: hidden;
            overflow-x: scroll; }
        body .table_div_wrap .outer table {
            min-width: 100%; }
        body .table_div_wrap .outer table td, body .table_div_wrap .outer table th {
            border-top: 1px black solid;
            border-right: 1px black solid;
            min-width: 150px;
            height: 80px;
            display: none; }
        body .table_div_wrap .outer table th {
            border: none;
            border-right: 1px black solid;
            height: 30px; }
        body .table_div_wrap .outer table th:first-child {
            display: table-cell;
            background: #cccccc; }
        body .table_div_wrap .outer table td:first-child {
            display: table-cell;
            background: #cccccc; }

    </style>
</head>
<body>
<div class="table_div_wrap">
    <div class="inner">
        <div class="table_thead">
            <table cellpadding="0" cellspacing="0">
                <thead>
                <tr>
                    <th>first</th>
                    <th>second</th>
                    <th>third</th>
                    <th>fourth</th>
                    <th>fifth</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="table_tbody">
            <table cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="outer">
        <div class="table_thead">
            <table cellpadding="0" cellspacing="0">
                <thead>
                <tr>
                    <th>first</th>
                    <th>second</th>
                    <th>third</th>
                    <th>fourth</th>
                    <th>fifth</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="table_tbody">
            <table cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var table_tbody = document.getElementsByClassName("table_tbody")[0];
    var table_thead = document.getElementsByClassName("table_thead")[0];
    var table_tbody_outer = document.getElementsByClassName("table_tbody")[1].getElementsByTagName('table')[0];
    table_tbody.onscroll = function (e) {
        // console.log(this.scrollLeft,this.scrollTop)
        // console.log(table_tbody_outer)
        table_thead.style.marginLeft = "-"+this.scrollLeft+"px"
        table_tbody_outer.style.marginTop = "-"+this.scrollTop+'px'
    }
</script>

 

看淡江湖
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html的table滚动时固定首行和首列
11-26
html的table滚动时固定首行和首例，网上多为3个table拼合实现，现使用一个table实现
分享一个首行表头和最左列和最右列固定中间滚动的html table样式
12-22
一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。
table固定首行首列css 最简单方法（亲测可用）
weixin_49798182的博客
05-30 3882
业务需要前端使用html 写了个table 如图： 需要滚动条上下左右滑动，但是固定首航首列关键代码：/* 首列固定 */left: 0;z-index: 1;/* 表头固定 */top: 0;z-index: 2;/* 表头首列强制最顶层 */z-index: 3;解析：关键属性 css :在 视口滚动到元素 top 距离小于 0px 之前，元素为相对定位。之后，元素将固定在与顶部距离 0px 的位置，直到视口回滚到阈值以下；同理。
HTML Table 首尾行、首列固定
kingwin28的博客
02-16 1243
HTML Table 首尾行、首列固定
html表格的列并列,纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生...
weixin_42347048的博客
06-30 572
纯html+css固定表格一列或多列，其余进行横向滚动的方法 工作时候，遇到一个需求，表格的前两列固定不动，其他的跟随滚动条滚动，并没有在意，想起来很简单，刚开始想法是前两列absolute定位，后面的relative定位并给left值为前面的总宽度，就这样做了，发现是有问题的，具体啥问题就不多说了，如真想研究，自己尝试吧。当然，网上有很多插件的，比较好用，也建议大家使用插件吧，如TableFre...
html 表格 锁定首行,教你实现首行及首列固定 Table
weixin_34773479的博客
06-07 1421
先秀一下 demo！此款 Table 源码~表面上，在顶部及左侧悬挂两栏并非难事。但单元格尺寸根据其不确定的内容伸展，且顶部及左侧表头也应随之调整宽高。Table 天然具备如此属性，我们可将 thead 剥离进行 fixed，但首列每一项分散在每一行，如何整体剥离？显然剥离较棘手，需转变思路。定义新元素模拟首列并悬挂于左侧，但其单元格如何同步同行单元格高度？利用 js 获取当前行高度并赋值于首列元...
html表格固定首行首列
nbin2008的博客
07-03 4782
html表格固定首行首列，适用于标准表格，格式如下： 写了两个方法： 1，表格表头固定,这种方法是copy一个table操作，不会改变原table任何样式，但是不
数据表格表头与首列固定的完全实现
05-10 211
前几天项目经理跟我说有这么个需求：一个很大的表格，垂直滑动时表头固定，水平滑动里第一、二列固定。我一想这也太难实现了，直接回复说可能实现不了，可是没过会经理发个12306网站的一个现存的实现样子，汗！我只能说那我先调研下实现的成本吧。心里想想反正客户给钱，没有什么理由不做啊。 1. 前期调研 先打开12306网站上面的那个表格，打开浏览器调试工具，发现他们好像用的是插件（dhtmlx...
html table表格
Happy_syy的博客
09-29 652
表格是由行和列排列而成的一种结构 HTML表格由table标签以及一个或多个tr、th或td标签组成： table标签用来定义表格，整个表格包含在table和/table标签中； tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格， 由tr和/tr标签表示；tr是table row的缩写 td标签和th标签用来定义单元格，所有单元格都在tr标签内， 每个单元格由一对td和/t...
HTML设置表格第一列,如何用css实现 表格第一列固定 其余内容横向滚动
weixin_36179941的博客
06-16 1243
匿名用户1级2015-07-17 回答html>* {margin: 0;padding: 0;}#table {position: relative;}#table th:first-child,...
可固定TABLE表格的首行与首列，可拖动查看更多内容
07-09
CSS + JS 编写 可固定TABLE表格的首行与首列，可拖动查看更多内容 可二次开发，代码简单、易懂。
vue表格实现固定表头首列
11-02
vue移动端项目 一个可以固定表头首列的表格 ，没有使用UI插件。 感兴趣的朋友可以参考下，希望对大家有所帮助
移动端table固定表头与固定第一列
02-20
移动端项目，移动端table固定表头与固定第一列,HTML5和css3
固定表头和第一列、内容可滚动的table表格
韭菜的故事
07-25 1万+
本文首发https://www.jianshu.com/p/61c52ffced0c   鉴于之前有几个项目都用到了第一行第一列固定不动的表格，所以整理了一下制作这种表格的方法。   基本原理是把表格分为四个部分，左上角是固定不动的，第一行和第一列是半固定的，只能左右移动或者上下移动，而右下角部分则是可以左右上下滑动，第一行和第一列根据右下角部分的移动来动态设置scrollLeft和s...
html中的tr，td，th标签
zhansan的博客
01-06 1万+
tr是 table row 表格的行 HTML中 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。 td是table data(表格数据) HTML中 标签定义 HTML 表格中的标准单元格。 元素中的文本通常是普通的左对齐文本。 th是table heading表格标题 ，一般表格第一行的数据都是table heading ...
html顶部table固定,CSS实现：固定Table表头和第一列
weixin_31139027的博客
07-14 3200
当表格内容太多的时候，固定表头不让标题滚出屏幕外，是一个很人性化的设计；而当横向项目内容太多时，固定第一列(项目列)也是一个很贴心的设计。本文介绍如何用CSS实现固定Table表头和第一列。固定Table表头和第一列CSStable{font-family:"Fraunces",serif;font-size:125%;white-space:nowrap;margin:0;borde...
html中table标签、tr标签、th标签、td标签的基础知识
热门推荐
TNANDXYF的博客
01-27 3万+
html表格标签——表格的基本结构表格的结构表格的基本标签表格标签的基本属性table标签的基本属性tr标签的基本属性th和td标签的基本属性 表格的结构 在基本表格结构中，表格标题、项目表头和数据资料构成了表格基本结构三个要素。 例如下图所示的表格中，表格标题为“通讯录”，表格第一行单元格中的内容基本不变，称作项目表头，表格第二行后单元格的内容通常会动态改变，称作数据资料。 基本表格 表格的基本标签 HTML表格由table标签以及一个或多个tr、th或td标签组成： table标签：定义一个表格 ca
前端 HTML body标签相关内容 常用标签 表格标签 table
weixin_30800987的博客
04-01 301
表格标签 table 表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。td标签，数据单元格可以包含放文本<span>标签、图片<img/>标签、列表<ul>、段落&lt...
uni-table表格固定表头
最新发布
06-06
要实现 uni-table 表格固定表头的效果，你可以按照以下步骤进行操作： 1. 在需要固定表头的 uni-table 组件上加上 `height` 属性，设置表格的高度，如 `height: 400px;`。 2. 使用 CSS 将表格头部的 `thead` 元素设置为固定定位，并设置 `top` 属性为 0，如下所示： ```css .uni-table-wrap thead { position: sticky; top: 0; } ``` 3. 为了让固定的表头不会遮挡表格内容，在表格上方添加一个占位元素，高度与表头相同，如下所示： ```html <div style="height: 60px;"></div> <uni-table :data="tableData" height="400"></uni-table> ``` 其中 `height` 属性的值应该与 `div` 元素的高度相同。 这样就可以实现 uni-table 表格固定表头的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值