table表格的thead固定，tbody展示出滚动条

最新推荐文章于 2024-06-17 16:30:49 发布
最新推荐文章于 2024-06-17 16:30:49 发布
阅读量1.4k 收藏 9
点赞数 11
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66226018/article/details/134949297
版权

我也是做了两次的table表格的thead固定，tbody展示出滚动条，第一次因为是存在有表头合并的原因没有做出来完好的效果，第二次是不仅有表头的合并，还有tbody中的rowspan的合并

  • 第一种：针对存在有表头合并的thead固定tbody展示滚动条

效果图：

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .table {
            width: 100%;
            border-top: 1px solid #DCDFE6;
            border-right: 1px solid #DCDFE6;
            border-spacing: 0;
            /*去掉单元格间隙*/
        }
        .table tbody {
            width: 100%;
        }
        .table thead,
        tbody tr { //关键代码行--tbody滚动条展示
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .table tbody { //关键代码行--tbody滚动条展示
            display: block;
            height: 300px;
            overflow-y: scroll;
        }
        .table .borderNone {
            border-left: none;
        }
        .table>thead>tr {
            background-color: #f5f7fa;
        }
        .table td {
            word-wrap: break-word;
            font-size: 20px;
            text-align: center;
            padding: 5px 10px;
            border-bottom: 1px solid #DCDFE6;
            border-left: 1px solid #DCDFE6;
        }
    </style>
</head>

<body>
    <div class="table-container">
        <table class="table">
            <thead>
                <thead style="font-weight:bolder">
                    <tr>
                        <td rowspan="3" style="min-width: 50px;font-size:18px;">序号</td>
                        <td rowspan="3" style="min-width: 150px;font-size:18px;">补贴</td>
                        <td colspan="6" style="font-size:18px;">项目</td>
                        <td colspan="4" style="font-size:18px">占比</td>
                        <td colspan="4" style="font-size:18px">住院</td>
                    </tr>
                    <tr>
                        <td rowspan="2" style="min-width: 100px;font-size:18px;">区数</td>
                        <td rowspan="2" style="min-width: 100px;font-size:18px;">总数</td>
                        <td class="borderNone" colspan="2">&nbsp;</td>
                        <td rowspan="2" style="min-width: 100px;font-size:18px;">职数</td>
                        <td class="borderNone" colspan="1">&nbsp;</td>
                        <td rowspan="2" style="min-width: 100px;font-size:18px;">班数</td>
                        <td class="borderNone" colspan="1">&nbsp;</td>
                        <td rowspan="2" style="min-width: 100px;font-size:18px;">人员</td>
                        <td class="borderNone" colspan="1">&nbsp;</td>
                        <td rowspan="2" style="min-width: 100px;font-size:18px;">月份</td>
                        <td rowspan="2" style="min-width: 100px;font-size:18px;">项目</td>
                        <td rowspan="2" style="min-width: 100px;font-size:18px;">单位</td>
                        <td class="borderNone" colspan="1">&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="min-width: 70px;font-size:18px;">金额</td>
                        <td style="min-width: 100px;font-size:18px;">人次</td>
                        <td style="min-width: 60px;font-size:18px;">占比</td>
                        <td style="min-width: 70px;font-size:18px;">住院</td>
                        <td style="min-width: 60px;font-size:18px;">补贴</td>
                        <td style="min-width: 60px;font-size:18px;">占比</td>

                    </tr>

                </thead>
            </thead>
            <tbody>
                //tr可以多复制几行看一下效果
                <tr>
                    <td>合并单元格</td>
                    <td>内容1</td>
                    <td>内容2</td>
                    <td>合并单元格</td>
                    <td>内容1</td>
                    <td>内容2</td>
                    <td>合并单元格</td>
                    <td>内容1</td>
                    <td>内容2</td>
                    <td>合并单元格</td>
                    <td>内容1</td>
                    <td>内容2</td>
                    <td>合并单元格</td>
                    <td>内容1</td>
                    <td>内容2</td>
                    <td>合并单元格</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>

</html>

第一种的方法只适合tbody中没有rowspan的合并方式，如果tbody中只有colspan合并没有rowspan合并使用第一种方法就足够了，但是如果你的tbody中存在rowspan的合并，那么你就只能使用第二种方法了 

第二种：针对存在有表头合并的thead，tbody中有rowspan的合并，                  固定tbody展示滚动条

效果图：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /* 这个是控制tbody中的高度展示 */
        .table-container {
            height: 200px;
            overflow-y: auto;
        }
        table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
        }
        thead {
            position: sticky;
            top: 0;
            background-color: #fff;
        }
        th, td {
            padding: 8px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>表头1</th>
                    <th>表头2</th>
                    <th>表头3</th>
                </tr>
            </thead>
            <tbody>
                //将两个tr为一组，多复制几个看看效果展示
                <tr>
                    <td rowspan="2">合并单元格</td>
                    <td>内容1</td>
                    <td>内容2</td>
                </tr>
                <tr>
                    <td>内容3</td>
                    <td>内容4</td>
                </tr>
                <tr>
                    <td rowspan="2">合并单元格</td>
                    <td>内容1</td>
                    <td>内容2</td>
                </tr>
                <tr>
                    <td>内容3</td>
                    <td>内容4</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

这种展示方式是有一点问题的，滚动条往上滚动时，thead的不管是合并的还是没合并的都边框线会消失，但是总体效果是实现的，如果比较介意这个地方，可以暂时不使用此方法

_chang.
关注
  • 11
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
tbody 滚动条设置
weixin_34221036的博客
11-29 4604
文章介绍了如何将滚动条设置在tbody标签上，并且表格整体和未设置滚动条一致；此外补充了一些table的冷门姿势。 How to set tbody height with overflow scroll 问题demo 解决问题demo 要想给tbody一个超出的滚动条，其实只需要给tbody设置一个固定height，以及overflow:auto也就是超出添加滚动条。但是table固有的disp...
原生table标签在tbody添加滚动条
SmallGirlYang的博客
11-27 1119
js 动态创建表格数据。
＜tbody＞出现滚动条后，同＜thead＞对不齐的解决方案
最新发布
ElectronStorm的专栏
06-17 338
第四步，编写js，当表体.scrollHeight > 表体.clientHeight时，表明出现了滚动条，则为表头添加scroll-thead样式，同时为表格整体添加scroll-table样式。否则就为表头添加.no-scroll-thead样式，同时为表格整体添加no-scroll-table样式即可。如上处理后，表头和表体能对齐，但如果表体出现滚动条，两者就会对不齐了。第一步，将table和thead分别加上ref（refTable, refTHeader)需求是需要表格滚动，并且表头不动。
html 表格选择滚动条,table设置tbody滚动条
weixin_36064196的博客
06-03 1429
jsp页面table中只让tbody 部分显示滚动条滚动，the2个table. 一个仅显示 table head部分, 另外一个仅显示 body部分. body部分的表, 设置 overflow:auto 即可. 难点: 2个table的 header 保持宽度一致, 以及左右滚动时保持一致. jquery 做个宽度自动匹配. 尝试下吧, 我想做的, 后来需CSS布局HTML小编今天和大家分享停...
css实现table表头固定，主体tbody部分出现滚动条
笑到世界都狼狈的博客
04-02 2763
首先，这是原文链接：https://www.mybj123.com/667.html，作者也写的比较好，但是我在原文的基础上，也发挥了一下自己的头脑，做了一点补充。 下面是我结合作者的代码做了一些修改的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
table标签中thead、tbody、tfoot的作用
热门推荐
刘军的专栏
04-26 3万+
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。    tbody、tfoot、thead一般来说用得不是很多，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对
html表格滚动字幕的宽度,HTML表格的宽度为100％，在tbody中具有垂直滚动
weixin_35895485的博客
06-03 253
小编典典为了使元素可滚动，我们需要更改其在页面上的显示方式，即用于display: block;将其显示为块级元素。由于我们更改了的display属性tbody，因此我们也应该更改thead element的属性，以防止破坏表布局。因此，我们有：thead, tbody { display: block; }tbody {height: 100px; /* Just for the d...
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
09-30
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table...
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <div class=table_box_big> <div class=table_box> <table> <thead> <th><div>标题一</div></th> ...
BootStrap的table表头固定tbody滚动的实例代码
09-01
在本例中，我们关注的是如何在Bootstrap的表格（table）中实现表头（thead）固定而tbody部分滚动的效果。这种效果对于展示大量数据时特别有用，因为它允许用户在滚动浏览长列表时始终保持列标题可见。 首先，让我们...
用css给tbody加垂直滚动条的具体思路及样式代码
09-22
给tbody加垂直滚动条的思路就是把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto即可，下面有个不错的示例，大家可以参考下
table添加垂直滚动条
Mervyn的博客
11-27 1万+
转载用css 给tbody加垂直滚动条 思路 把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 把thead的tr设置成display:block。 因为都设置成block所以要给td手动添加宽度 &lt;table class="layui-table"&gt; &lt;thead&gt; &lt;tr style="disp...
使table表格横向和垂直滚动
北冥の魚
11-07 949
想要table表格垂直滚动，加点CSS即可 循环合并表头 本文使用框架为 Vue <template> <div class="pages-tables" id="pages-tables" style="overflow-x:scroll;"> <table class="table table-bordered" id="table" c...
table表格
nunumaymax的博客
08-10 1091
注意：border-spacing属性若设置一个值，则单元格上下左右的四个方向都会生效；若设置两个值，第一个值代表左右的间距，第二个值代表上下的间距。中的 第一个单元格 和 最后一个单元格 设置。思路：table元素外层包裹一个。的 宽高top属性 以及 里面。的样式错乱问题，需要手动调整。......
在Table表格中添加垂直滚动条
RisoKome的博客
07-15 1111
<style> /*设置 tbody高度大于400px时 出现滚动条*/ table tbody { display: block; height: 400px; overflow-y: scroll; } table thead, tbody tr { display: table; width: 100%; table-layout: fixed; } /*滚动条默
table设置tbody滚动条
叶落无痕的博客
09-28 2183
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; } .
tbody 不能充满table的原因
Fan_c_w的博客
06-04 2455
tbody 不能充满table的原因 table设置了display :block 属性 改成 display：table 属性就可以了 值 描述 block 此元素将显示为块级元素，此元素前后会带有换行符。 table 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。 ...
bootstrap table thead固定，tbody垂直滚动条
06-06
要实现 Bootstrap Table 的表头固定，而表体（tbody）部分带有垂直滚动条，可以通过以下步骤完成： 1. 在表格外层添加一个 div 容器，并设置样式 position: relative。 2. 在 div 容器内部添加一个固定位置的表头（thead）元素，并设置样式 position: absolute 和 top: 0。 3. 在 div 容器内部再添加一个滚动容器（overflow: auto），并将表体（tbody）元素放置其中。 4. 设置滚动容器的高度（height），使其可以出现垂直滚动条。 5. 在表格中设置固定宽度（width），以保证表头和表体的列宽一致。 以下是一个示例代码： ``` <div style="position: relative;"> <table class="table" style="width: 100%;"> <thead style="position: absolute; top: 0;"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> </table> <div style="height: 200px; overflow: auto;"> <table class="table" style="width: 100%;"> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> <!-- more rows... --> </tbody> </table> </div> </div> ``` 请注意，以上示例代码仅供参考，具体实现方式可能因为 Bootstrap Table 的版本和样式等因素而有所不同。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值