【table头部尾部固定，tbody滚动效果】

最新推荐文章于 2024-07-31 02:32:41 发布
最新推荐文章于 2024-07-31 02:32:41 发布
阅读量574 收藏 9
点赞数 11
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42589681/article/details/135341813
版权

table头部尾部固定，tbody滚动效果

1.表格滚动(列寬相同)

在这里插入图片描述
在这里插入图片描述

  • html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>表格滚动(列寬相同)</title>
    <link rel="stylesheet" href="table-scroll.css">
</head>
<script src="../../js/jquery-3.6.0.min.js"></script>
<script src="table-scroll.js"></script>
<body>
    <div class="table-box">
        <table>
            <caption><h2>table头部尾部固定，tbody滚动效果</h2></caption>
                <thead>
                    <th>标题1</th>
                    <th>标题2</th>
                    <th>标题3</th>
                    <th>标题4</th>
                    <th>标题5</th>
                    <th>标题6</th>
                    <th>标题7</th>
                    <th>标题8</th>
                    <th>标题9</th>
                    <th>标题10</th>
                </thead>
                <tbody>
                    <tr>
                        <td>A101啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
                        <td>A102</td>
                        <td>A103</td>
                        <td>A104</td>
                        <td>A105</td>
                        <td>A106</td>
                        <td>A107</td>
                        <td>A108</td>
                        <td>A109</td>
                        <td>A110</td>
                    </tr>
                    <tr>
                        <td>A101</td>
                        <td>A102</td>
                        <td>A103</td>
                        <td>A104</td>
                        <td>A105</td>
                        <td>A106</td>
                        <td>A107</td>
                        <td>A108</td>
                        <td>A109</td>
                        <td>A110</td>
                    </tr>
                    <tr>
                        <td>A101</td>
                        <td>A102</td>
                        <td>A103</td>
                        <td>A104</td>
                        <td>A105</td>
                        <td>A106</td>
                        <td>A107</td>
                        <td>A108</td>
                        <td>A109</td>
                        <td>A110</td>
                    </tr>
                    <tr>
                        <td>A101</td>
                        <td>A102</td>
                        <td>A103</td>
                        <td>A104</td>
                        <td>A105</td>
                        <td>A106</td>
                        <td>A107</td>
                        <td>A108</td>
                        <td>A109</td>
                        <td>A110</td>
                    </tr>
                </tbody>
                <tfoot>
                    <td colspan="5"><div style="width:251px;">合计</div></td>
                    <td colspan="1">1000</td>
                    <td colspan="4"></td>
                </tfoot>
        </table>

    </div>
</body>

</html>

  • css

.table-box{
    width:100%;
    margin: 10px;
}
/* 滚动条宽度 */
/* ::-webkit-scrollbar{
    width: 8px;
} */
/* 滚动条宽度 */
/* ::-webkit-scrollbar-thumb{
    background-color: #27314d;
} */
table{
    width:800px;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

table caption{
   text-align: left;
}
table thead th,table thead td,
table tbody th,table tbody td,
table tfoot th,table tfoot td
{
    color: #333;
    font-size: 15px;
    /* text-align: center; */
    /* padding: 8px 10px; */
    border: 1px solid rgb(100, 68, 136);
    width: 200px;
    height: 28px;
}

table thead{
   color:white;
   background-color: #38F;
}
table tfoot{
    background-color: rgb(255, 255, 255);
}

table thead,
table tfoot
{
    display: block;
    /* width: calc(100%+18px);8px为滚动条宽度 */
    /* max-width: 1010px; */
    width: 2010px;
    overflow: hidden;
}
table tbody{
    display: block;
    /* width: calc(100%+18px);8px为滚动条宽度 */
    max-width: 2010px;
    height: 100px;
    overflow: auto;
}

table thead tr,
table tbody tr,
table tfoot tr 
{
    box-sizing: border-box;
    /* 在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。 */
    /* table-layout: auto; */
    /* 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。 */
    /* table-layout: fixed; */
    display: table;
    width: 2010px;
}

table tbody tr td{
    border-bottom: none;
}

  • js

$(function () {
    $('table tbody')[0].style.width = "1028px";
    $('table thead')[0].style.width = "1011px";
    $('table tfoot')[0].style.width = "1011px";
    //定義tbody滚动事件
    $('table tbody')[0].onscroll = function (e) {
    //thead和tfoot随着tbody左右滚动
        $('table thead').scrollLeft($(this).scrollLeft());
        $('table tfoot').scrollLeft($(this).scrollLeft());
    };
});

2.表格滚动(列寬不同)

在这里插入图片描述

在这里插入图片描述

  • html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>表格滚动(列寬不同)</title>
    <link rel="stylesheet" href="table-scroll.1.css">
</head>
<script src="../../js/jquery-3.6.0.min.js"></script>
<script src="table-scroll.js"></script>

<body>
    <div class="table-box">
        <table>
            <caption>
                <h2>table头部尾部固定，tbody滚动效果</h2>
            </caption>
            <thead>
                <th style="width: 70px;">标题1</th>
                <th style="width: 120px;">标题2</th>
                <th style="width: 120px;">标题3</th>
                <th style="width: 250px;">标题4</th>
                <th style="width: 100px;">标题5</th>
                <th style="width: 100px;">标题6</th>
                <th style="width: 120px;">标题7</th>
                <th style="width: 120px;">标题8</th>
                <th style="width: 120px;">标题9</th>
                <th style="width: 120px;">标题10</th>
            </thead>
            <tbody>
                <tr>
                    <td style="width: 70px;">A101啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
                    <td style="width: 120px;">A102</td>
                    <td style="width: 120px;">A103</td>
                    <td style="width: 250px;">A104</td>
                    <td style="width: 100px;">A105</td>
                    <td style="width: 100px;">A106</td>
                    <td style="width: 120px;">A107</td>
                    <td style="width: 120px;">A108</td>
                    <td style="width: 120px;">A109</td>
                    <td style="width: 120px;">A110</td>
                </tr>
                <tr>
                    <td style="width: 70px;">A101</td>
                    <td style="width: 120px;">A102</td>
                    <td style="width: 120px;">A103</td>
                    <td style="width: 250px;">A104</td>
                    <td style="width: 100px;">A105</td>
                    <td style="width: 100px;">A106</td>
                    <td style="width: 120px;">A107</td>
                    <td style="width: 120px;">A108</td>
                    <td style="width: 120px;">A109</td>
                    <td style="width: 120px;">A110</td>
                </tr>
                <tr>
                    <td style="width: 70px;">A101啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
                    <td style="width: 120px;">A102</td>
                    <td style="width: 120px;">A103</td>
                    <td style="width: 250px;">A104</td>
                    <td style="width: 100px;">A105</td>
                    <td style="width: 100px;">A106</td>
                    <td style="width: 120px;">A107</td>
                    <td style="width: 120px;">A108</td>
                    <td style="width: 120px;">A109</td>
                    <td style="width: 120px;">A110</td>
                </tr>
                <tr>
                    <td style="width: 70px;">A101啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
                    <td style="width: 120px;">A102</td>
                    <td style="width: 120px;">A103</td>
                    <td style="width: 250px;">A104</td>
                    <td style="width: 100px;">A105</td>
                    <td style="width: 100px;">A106</td>
                    <td style="width: 120px;">A107</td>
                    <td style="width: 120px;">A108</td>
                    <td style="width: 120px;">A109</td>
                    <td style="width: 120px;">A110</td>
                </tr>
            </tbody>
            <tfoot>
                <td colspan="5" style="width:53%;">合计
                </td>
                <td colspan="1" style="width:8%;">1000</td>
                <td colspan="4"></td>
            </tfoot>
        </table>

    </div>
</body>

</html>

  • css


.table-box{
    width:100%;
    margin: 10px;
}

table{
    width:800px;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

table caption{
   text-align: left;
}
table thead th,table thead td,
table tbody th,table tbody td,
table tfoot th,table tfoot td
{
    color: #333;
    font-size: 15px;
    border: 1px solid rgb(100, 68, 136);
    height: 28px;
}

table thead{
   color:white;
   background-color: #38F;
}
table tfoot{
    background-color: rgb(255, 255, 255);
}

table thead,
table tfoot
{
    display: block;
    width: 2010px;
    overflow: hidden;
}
table tbody{
    display: block;
    max-width: 2010px;
    height: 100px;
    overflow: auto;
}

table thead tr,
table tbody tr,
table tfoot tr 
{
    box-sizing: border-box;
    display: table;
    width: 2010px;
}

table tbody tr td{
    border-bottom: none;
}
weixin_42589681
关注
BootStrap的table表头固定tbody滚动的实例代码
09-01
在本例中，我们关注的是如何在Bootstrap的表格（table）中实现表头（thead）固定而tbody部分滚动的效果。这种效果对于展示大量数据时特别有用，因为它允许用户在滚动浏览长列表时始终保持列标题可见。 首先，让我们...
如何实现table表头固定但是tbody可以滚动【附源码实例】
赏樱看雪撸代码
12-06 3431
table表头固定，自定义tbody高度，tbody设置高度失效，tbody设置高度不生效，tr设置高度，tbody滚动条
table表格，thead固定，tbody滚动
icemwj的博客
04-04 894
table表格，thead固定，tbody滚动
Html示例-表格表头固定+首尾列固定
weixin_40905856的博客
07-31 98
登录后复制 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .table_wrap { wi...
table表格的thead固定，tbody展示出滚动条
m0_66226018的博客
12-12 1655
我也是做了两次的table表格的thead固定，tbody展示出滚动条，第一次因为是存在有表头合并的原因没有做出来完好的效果，第二次是不仅有表头的合并，还有tbody中的rowspan的合并。
HTML---表格table标签中thead、tbody、tfoot的作用
weixin_45729253的博客
04-17 1万+
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。 tbody、tfoot、thead一般来说用得不是很多，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂...
table tbody内容滚动
weixin_46544600的博客
12-09 165
【代码】table tbody内容滚动。
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
08-29
table表格，让thead固定，tbody有滚动条， 关键是都对齐的纯css写法关键是都对齐的纯css写法
CSS设置table下tbody的滚动条的实现
09-22
CSS设置table下tbody的滚动条实现是一种网页布局技术，能够让HTML表格的tbody部分在内容超出可视区域时显示出垂直滚动条，而thead（表头）则保持固定不动。这种技术在制作具有大量数据内容的网页表格时非常有用，...
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <div class=table_box_big> <div class=table_box> <table> <th><div>标题一</div></th> <th><div>...
完美tbody滚动效果
There is no one l would rather be than me
01-08 885
效果图： 源码： <!DOCTYPE html> <html> <head> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .mytable{ width: 800px; background-col.
tbody超长显示滚动条
Knight_Key的博客
01-18 1810
头文件加样式 <style> table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width: calc( 100% - 1...
HTML table表格 固定表头 tbody加滚动条
热门推荐
沐枫
12-31 2万+
纯CSStable表格thead固定tbody滚动效果 由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！ 实现思路： 将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...
为table标签内的tbody添加滚动条
lihaofeifei的博客
11-23 9301
 CSS代码演示 table tbody { display:block; height:200px; //高度根据实际自定义 overflow-y:scroll; -webkit-overflow-scrolling: touch; // 为了滚动顺畅 } table tbody::-webkit-scrollbar { display: none...
原生table标签在tbody添加滚动条
SmallGirlYang的博客
11-27 1211
js 动态创建表格数据。
table给tbody设置滚动条
qq_37866866的博客
06-12 1541
代码如下：(数据DeviceList、funcName等字段可直接删除，只是做多数据的展示，根据自己的数据进行修改)将table的thead和tbody分成两个table，并将tbody的table用div包起来。用得最多，也比较好的方案。
table设置tbody滚动条
G_ruirui的博客
01-13 1734
table tbody { display: block; height: 400px; overflow-y: scroll; } table thead, tbody tr, tfoot tr { display: table; width: 100%; height: 40px; table-layout: fixed; font-size: 16px; text-align:center; } t
thead,tbody,tfoot
xiaolvzi的专栏
08-27 921
写html代码的时候,遇到了Tbody这个标记符,这个标记符是对于表格来说的，每个页面都有head ,body两部分，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。 thead用来放标题之类的东西 tbody放数据本体 tfoot放表格的脚注之类…… 标签使用其本
HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行，跨列
weixin_33991727的博客
03-30 771
在HTML中表格是作为一个整体来解析的，解析完才会在页面显示，如果表格很复杂很长，加载时间很长，用户体验就不好。所以这里就要用到表格结构标签，解析一部分就显示一部分，不用等表格全部加载完再显示。 表格结构标签（添加这三个标签时，要注意不能影响网页布局）： <thead></thead> 表头部（放表格的标题之类） <tbody></tbod...
table标签表头固定 tbody可以滚动
最新发布
10-08
Table标签在HTML中用于创建表格，当需要表头固定并且表格主体部分tbody能够滚动时，你可以通过CSS来实现这种布局。通常，这涉及到将thead部分设置为`position: fixed`使其相对于浏览器窗口固定，而tbody则使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值