HTML Table 首尾行、首列固定

最新推荐文章于 2023-08-23 10:51:53 发布
最新推荐文章于 2023-08-23 10:51:53 发布
阅读量1.2k 收藏 1
点赞数
文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingwin28/article/details/129060576
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
        }
        
        td {
            border: 1px solid #d4d4d4;
        }
        
        td {
            height: 28px;
            min-height: 28px;
            max-height: 28px;
            font-size: 12px;
            text-align: center;
            width: 80px;
            min-width: 80px;
            max-width: 80px;
            padding: 0;
            line-height: 28px;
        }
        
        .report-box {
            width: 500px;
            height: 300px;
           /*overflow: hidden;*/
        }
        
        .left-table,
        .right-table {
            float: left;
        }
        
        .content-table {
            overflow: scroll;
        }
        
        .left-title,
        .right-title {
            overflow: hidden;
        }
        
        #chanceGridTable1 tr:first-child td:first-child,
        #chanceGridTable3 tr:first-child td {
            border-top: none;
        }
        
        .chanceGridTable2 tr:first-child td:first-child,
        #chanceGridTable3 tr td:first-child {
            border-left: none;
        }
    </style>

</head>

<body>
    <div class="report-box clear">
        <div class="left-table">
            <table class="table" id="chanceGridTable">
                <tr>
                    <td></td>
                </tr>
            </table>
            <div class="left-title">
                
<table class="table" id="chanceGridTable1">
                    <tr>
                        <td>小1</td>
                    </tr>
                    <tr>
                        <td>小2</td>
                    </tr>
                    <tr>
                        <td>小3</td>
                    </tr>
                    <tr>
                        <td>小4</td>
                    </tr>
                    <tr>
                        <td>小5</td>
                    </tr>
                    <tr>
                        <td>小6</td>
                    </tr>
                    <tr>
                        <td>小7</td>
                    </tr>
                    <tr>
                        <td>小8</td>
                    </tr>
                    <tr>
                        <td>小9</td>
                    </tr>
                    <tr>
                        <td>小10</td>
                    </tr>
                    <tr>
                        <td>小11</td>
                    </tr>
                    <tr>
                        <td>小12</td>
                    </tr>
                    <tr>
                        <td style="visibility: hidden;"></td>
                    </tr>
                </table>
            </div>
<table class="table" id="chanceGridTable">
                <tr>
                    <td></td>
                </tr>
            </table>
        </div>

        <div class="right-table">
            <div class="right-title">
                <table class="table chanceGridTable2">
                    <tr>
                        <td>语文</td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>历史</td>
                        <td>地理</td>
                        <td>生物</td>
                        <td>化学</td>
                        <td>物理</td>
                        <td>自然</td>
                        <td>社会</td>
                        <td>政治</td>
                        <td>美术</td>
                        <td>音乐</td>
                        <td>体育</td>
                         
                    </tr>
                </table>
            </div>

            <div class="content-table" style="overflow-x:hidden;">
                <table class="table" id="chanceGridTable3">
                    <tr>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                    </tr>
                    <tr>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                    </tr>
                    <tr>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                    </tr>
                    <tr>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                    </tr>
                    <tr>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                    </tr>
                    <tr>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                    </tr>
                    <tr>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                    </tr>
                    <tr>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                    </tr>
                    <tr>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                    </tr>
                    <tr>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                    </tr>
                    <tr>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                    </tr>
                    <tr>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>99</td>
                        <td>991</td>
                    </tr>
                </table>
            </div> 

<div class="right-title bottom" style="overflow-x:auto;">
                <table class="table chanceGridTable2">
                    <tr>
                        <td>语文</td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>历史</td>
                        <td>地理</td>
                        <td>生物</td>
                        <td>化学</td>
                        <td>物理</td>
                        <td>自然</td>
                        <td>社会</td>
                        <td>政治</td>
                        <td>美术</td>
                        <td>音乐</td>
                        <td>体育</td>
                         
                    </tr>
                </table>
            </div>

        </div>
    </div>
</body>

<script src="http://s.yidaichu.com/r/libs/js/jquery-3.1.1.min.js"></script>
<script>
    $(".right-table").width($(".report-box").width() - $(".left-table").width()*2)
    $(".left-title,.content-table").height($(".report-box").height() - $(".chanceGridTable2").height()*2)

    $(".content-table").on("scroll", function() {
        var right_div2_top = $(this).scrollTop();
        $(".left-title").scrollTop(right_div2_top); 
    })

$(".bottom").on("scroll", function() {
        var right_div2_left = $(this).scrollLeft();
        $(".right-title").scrollLeft(right_div2_left);
$(".content-table").scrollLeft(right_div2_left);
    })

</script>
</html>

效果：
在这里插入图片描述

KingFu28
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS+CSS - table 表格固定表头和第一列、内容可滚动 （转载）
weixin_30819085的博客
09-30 1409
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-...
html固定左侧不滑动,css fixed 定位 让局部UI固定 不跟随滚动条移动
weixin_39622760的博客
05-30 1249
文章目录在国庆长假马上结束时,分享一篇关于 css定位的博文,收回你的玩心,开始工作了.css 中的定位是一个重点,也是难点,之前有一篇专门探讨 css中position定位的问题达到的效果 如果你够细心的话,你会发现我的博客列表也和博文详情页右侧侧边栏有变化之前侧边栏是跟随滚动条移动的,当右侧内容不足时,会看到一片空白,体验不好所以我希望,当滚到到右侧无内容填补时,指点的模块能做一个固定定位,...
table原生固定表头和固定列实现
A good man
08-23 1071
【代码】table原生固定表头和固定列实现。
<table>表格标签css固定最后一列方案
陈万洲的专栏
11-13 9582
html中&lt;table&gt;表格标签css固定最后一列方案，table固定最后一列，table固定最后一列，table固定最后一列 先看效果吧： css写法： &lt;style&gt; /*设置倒数第二个 右边内边距*/ table tr th:nth-last-child(2), table tr td:nth-last-child(2){ ...
HTML页面滚动时一部分内容位置固定不动不滚动的完成
yunduanaoligei的博客
08-27 3705
本文关键介绍了HTML 页面滚动时一部分內容部位固定不动不滚动的完成，原文中根据实例编码介绍的十分详尽，对大伙儿的学习或是工作中具备一定的参照学习使用价值，必须的小伙伴们下边伴随着我来一起学习学习吧 文中关键介绍了HTML页面滚动时一部分內容部位固定不动不滚动，对合理布局有一定的协助功效，废话不多说，开始： 页面源代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title
html 之表格
云胡
07-13 470
<body> <h4> 一列: </h4> <!-- <table border = "1"> --> <tr> <td> 100 </td> </tr> </body>加上 <table border = "1">之后表格的每一格，及边框加上1像素的边框，如下图所示。 <body> <h4> 一行三列: </h4> <table border = "1"> <tr>
完美解决table首行首列固定滚动条适应表格宽度
01-20
1、数据较多时需要横向竖向滚动，很多数值记不清谁是谁了，所以需要主要标题内容需要固定。 2、通常的首行首列的固定，下方滚动条左侧会空缺一块，不够美观，我加了一层悬浮的div 给予适应
分享一个首行表头和最左列和最右列固定中间滚动的html table样式
12-22
一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列...
HTML页面table表格固定行和列
01-04
当表格的内容很多，表格很长、很高的时候，为了查阅方便，常常要有固定表的表头和左侧侧栏的需求。
html的table滚动时固定首行和首列
11-26
html的table滚动时固定首行和首例，网上多为3个table拼合实现，现使用一个table实现
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
纯HTML的固定列的表格
01-15
纯HTML的固定列的，列任意指定，滚动效果平滑。
利用js+css+html实现固定table的列头不动
10-20
本文分享了利用js+css+html实现固定table的列头不动的实例代码。小编认为具有很好的参考价值，感兴趣的朋友可以看下
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
vue表格实现固定表头首列
11-02
vue移动端项目 一个可以固定表头首列的表格 ，没有使用UI插件。 感兴趣的朋友可以参考下，希望对大家有所帮助
HTML 页面滚动时，部分内容位置固定不滚动
热门推荐
肖朋伟
04-05 1万+
HTML 页面滚动时，部分内容位置固定不滚动 效果截图： 页面源代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>无标题页</title> </head> <body style="width: 900px; ma...
【HTML 教程】表格标签
web前端开发
12-07 612
作者 | 阮一峰表格（table）以行（row）和列（column）的形式展示数据。1、<table>，<caption><table>是一个块级容器...
html表格固定右侧列,表格固定列的简单实现.html
weixin_28520495的博客
05-31 582
表格固定列的简单实现*{box-sizing: border-box;}.box{width: 800px;overflow-x:auto;margin: 100px auto;}table{width: 1000px;border-collapse: collapse;text-align: center;white-space: nowrap;}td,th{width: 100px;heigh...
html table 首列固定
最新发布
09-03
要实现HTML表格中首列固定，我们可以使用CSS和JavaScript来实现。具体的方法如下： 1. 首先，在HTML文件中创建一个表格，并将其放置在一个具有固定高度和宽度的父容器内。表格的第一列将成为我们要固定的列。 2. 使用CSS将表格设置为固定布局，并将父容器设置为相对定位。 ```html <style> #container { position: relative; height: 300px; /* 设置固定高度 */ overflow: auto; } table { table-layout: fixed; } </style> <div id="container"> <table> <!-- 表格的内容 --> </table> </div> ``` 3. 接下来，使用JavaScript获取表格的第一列，并将其进行固定定位。同时，将内容滚动时对应的左边距设置为滚动位置。 ```html <script> window.onload = function() { var table = document.querySelector('table'); var firstColumn = table.getElementsByTagName('td')[0]; // 获取第一列 table.style.marginLeft = -firstColumn.offsetLeft + 'px'; // 设置左边距为第一列的位置 // 监听内容的滚动事件 document.getElementById('container').addEventListener('scroll', function() { table.style.marginLeft = -firstColumn.offsetLeft + 'px'; // 设置左边距为滚动位置 }); }; </script> ``` 通过以上步骤，我们就可以实现HTML表格中首列固定的效果。当我们在父容器内滚动内容时，第一列将保持在固定位置，并能够与表格的其他部分对应。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值