table固定表头,tbody滚动条样式设置以及填的几个坑

工作中或许会用到 table 表格固定表头, tbody 滚动的效果。为了方便我这里直接用的 Bootstrap 的表格样式。

table固定表头,tbody滚动条样式设置以及填的几个坑 经验总结 第1张

今天研究了一下,整理了几种方案:

有的建议使用:position: absolute 或者 position: fixed; 

.table thead{
    position: absolute;
    top: 0;
    left: 0;
}

或者

.table thead{
    position: fixed;
}

但是会有一些问题,比如 tbody 会上移,与 thead 重叠;thead 宽度失效,不能和 tbody 对齐等。

而且解决起来比较麻烦,需要把 thead 和 tbody 设置为 display: block; 等等很多地方需要修改。

table固定表头,tbody滚动条样式设置以及填的几个坑 经验总结 第2张

比较常用的方法是,将 tabletheadtbody 拆分成两个表格,用 div 包起来,给 div 设置固定高度和 overflow: auto; 属性(其实只给 tbody 的 table 包上 div 就可以)。

代码如下:

<table class="table table-bordered">
    <thead>
    <tr>
        <th>姓名</th>
        <th>手机</th>
    </tr>
    </thead>
</table>

<div class="table-box" style="height: 350px;overflow: auto">
    <table class="table table-bordered">
        <tbody>
        <tr>
            <td>张三</td>
            <td>13333333333</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>13333333333</td>
        </tr>
        ......
        </tbody>
    </table>
</div>

此外,要给 table 添加一个 table-layout: fixed; 属性:使列宽由表格宽度和列宽度设定。其他属性参考这篇文章

.table{
    table-layout: fixed;
}

这样滚动条是出来了,但是好像还有点问题。两个表格被分开了,而且因为 tbody 多了一个滚定条,导致宽度 和 thead 也不一致。

table固定表头,tbody滚动条样式设置以及填的几个坑 经验总结 第3张

这是因为 Bootstrap 给 .table 设置了一个下边距 margin-bottom: 20px; ,将其改为 -1px 就可以了。

table固定表头,tbody滚动条样式设置以及填的几个坑 经验总结 第4张

至于对齐,可以使用 固定宽度,只需要给第一设置一个宽度,下面的会自动与之对齐。如果表格宽度是 100% ,可以给前几固定宽度,最后一个不设置,使其宽度自适应。

<table class="table table-bordered">
    <thead>
    <tr>
        <th style="width: 200px">姓名</th>
        <th>手机</th>
    </tr>
    </thead>
</table>

<div class="table-box" style="height: 350px;overflow: auto">
    <table class="table table-bordered">
        <tbody>
        <tr>
            <td style="width: 200px">张三</td>
            <td>13333333333</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>13333333333</td>
        </tr>
        ......
        </tbody>
    </table>
</div>

也可以直接用 CSS 选择器进行固定宽度

.table td:first-child,.table th:first-child{
    width: 200px;
}

注意,这里的表头是 th ,表体是 td ,都需要设置宽度。

也可以使用 <col> 统一设置列宽: col 的属性在下面详细介绍。

<table class="table table-bordered">
        <col style="width: 200px"><!--统一列宽-->
        <tbody>
        <tr>
            <td>张三</td>
            <td>13333333333</td>
        </tr>
<table>

<table> 标签内添加 <col> 标签,统一设置列宽,注意,两个表格都需要加。

效果如下,这样基本上就已经实现功能了。

table固定表头,tbody滚动条样式设置以及填的几个坑 经验总结 第5张

注意:因为我直接使用的 Bootstrap ,没有出现问题,如果是原生的表格样式出现对不齐的现象,可以尝试把 div 设置为盒模型:

.table-box{
    box-sizing: border-box;
}

另外,滚动条和上下箭头可能会影响元素的高度或者宽度。

可以参照 CSS滚动条选择器设置滚动条的样式,如下。

以下伪元素选择器可以修改 webkit 浏览器的滚动条样式

::-webkit-scrollbar 整个滚动条.

::-webkit-scrollbar-button 滚动条上的按钮(上下箭头)

::-webkit-scrollbar-thumb 滚动条上的滚动滑块

::-webkit-scrollbar-track 滚动条轨道

::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分

::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分

::-webkit-resizer 某些元素的corner部分的部分样式(如:textarea的可拖动按钮)

语法:

::-webkit-scrollbar { styles here }

例子:

直接隐藏滚动条:

.table-box::-webkit-scrollbar { /*滚动条整体样式*/
    display: none;
}

我们试着给滚动条去掉上下箭头,稍微改一下样式。

.table-box::-webkit-scrollbar { /*滚动条整体样式*/
    width: 10px;
}
.table-box::-webkit-scrollbar-button{
    display: none;
}
.table-box::-webkit-scrollbar-thumb{
    border-radius: 20px;
    background: rgba(0,0,0,0.3);
}
.table-box::-webkit-scrollbar-track{
    background: #edca95;
}

如下图:注意,必须给 ::-webkit-scrollbar 设置样式,之后才生效。

table固定表头,tbody滚动条样式设置以及填的几个坑 经验总结 第6张

col 属性拓展:

<col> 标签可以为表格中一个或多个列定义属性值。

如需对全部列应用样式,则可以使用 <col> 标签,这样就不需要对各个单元和各行重复设置样式了。

注意:只能在 tablecolgroup 元素中使用 <col> 标签。


未经允许不得转载:前端资源网 - w3h5 » table固定表头,tbody滚动条样式设置以及填的几个坑

赞 (5)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)