原声表格中将thead固定,tobody超出高度滚动,滚动条样式改变

导读:本篇文章讲解 原声表格中将thead固定,tobody超出高度滚动,滚动条样式改变,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

css设置滚动条的样式

注意:滚动条设置的width、height,分别是对应纵向滚动条 宽度、横向滚动条 高度,无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式。

常用属性如下:

::-webkit-scrollbar

滚动条整体样式

::-webkit-scrollbar-button

一设置滚动条样式,滚动条两端的按钮图标就消失,但可以重新设置图片、新样式

::-webkit-scrollbar-track

外层轨道

::-webkit-scrollbar-track-piece

内层轨道,它会覆盖外层轨道 scrollbar-track 的样式

::-webkit-scrollbar-thumb

::-webkit-scrollbar-thumb:hover

::-webkit-scrollbar-thumb:vertical:hover

::-webkit-scrollbar-thumb:horizontal:hover

滑块

滑块悬浮

纵向滑块悬浮

横向滑块悬浮

::-webkit-scrollbar-corner

边角,两个滚动条交汇处

html

 <div class="tableBox">
                <table>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>专业</th>
                            <th>身份证号</th>
                            <th>联系电话</th>
                            <th>操作</th>
                        </tr>
                    </thead> 
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>胡彦斌</td>
                            <td>大数据管理、大数据研究</td>
                            <td>365598666659895968</td>
                            <td>15856936545</td>
                            <td>选择</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>陈涛</td>
                            <td>信息安全研究</td>
                            <td>365598666659895968</td>
                            <td>15856936545</td>
                            <td>选择</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>胡彦斌</td>
                            <td>大数据管理、大数据研究</td>
                            <td>365598666659895968</td>
                            <td>15856936545</td>
                            <td>选择</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>胡彦斌</td>
                            <td>大数据管理、大数据研究</td>
                            <td>365598666659895968</td>
                            <td>15856936545</td>
                            <td>选择</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>胡彦斌</td>
                            <td>大数据管理、大数据研究</td>
                            <td>365598666659895968</td>
                            <td>15856936545</td>
                            <td>选择</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>胡彦斌</td>
                            <td>大数据管理、大数据研究</td>
                            <td>365598666659895968</td>
                            <td>15856936545</td>
                            <td>选择</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>胡彦斌</td>
                            <td>大数据管理、大数据研究</td>
                            <td>365598666659895968</td>
                            <td>15856936545</td>
                            <td>选择</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>胡彦斌</td>
                            <td>大数据管理、大数据研究</td>
                            <td>365598666659895968</td>
                            <td>15856936545</td>
                            <td>选择</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>胡彦斌</td>
                            <td>大数据管理、大数据研究</td>
                            <td>365598666659895968</td>
                            <td>15856936545</td>
                            <td>选择</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>胡彦斌</td>
                            <td>大数据管理、大数据研究</td>
                            <td>365598666659895968</td>
                            <td>15856936545</td>
                            <td>选择</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>胡彦斌</td>
                            <td>大数据管理、大数据研究</td>
                            <td>365598666659895968</td>
                            <td>15856936545</td>
                            <td>选择</td>
                        </tr>
                    </tbody>
                </table>
            </div>

css

.PwindowMain .tableBox {
    width: 1150px;
    height: 480px;
    margin: auto;
}
.PwindowMain .tableBox table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    /* border: 1px solid rgba(230,230,230,1); */
}

.PwindowMain .tableBox table th,
td {
    border: 1px solid rgba(230, 230, 230, 1);
}

.PwindowMain .tableBox table tr {
    height: 48px;
}

.PwindowMain .tableBox table thead tr {
    background: #F9FCFE;
}

.PwindowMain .tableBox table tr th {
    height: 48px;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
}

.PwindowMain .tableBox table tbody tr td {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;
    text-align: center;
}
/** 这里当tbody中的tr是2的倍数的时候给他背景色 **/
.PwindowMain .tableBox table tbody tr:nth-child(2n) {
    background: #F9FCFE;
}

.PwindowMain .tableBox table tbody tr td:last-child {
    color: #3389E0;
}

.PwindowMain .tableBox table tbody tr:hover {
    background: rgb(223, 224, 224, 0.6);
}
/** 设置tbody超出高度滚动 **/
.PwindowMain .tableBox table tbody {
    display: block;
    height: 432px;
    overflow-y: scroll;
}

.PwindowMain .tableBox table thead,
.PwindowMain .tableBox table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    /*重要  表格固定算法*/
}

.PwindowMain .tableBox table thead {
    /*留出滚动条的位置*/
    width: calc(100% - 5px)
}

/*设置滚动条的样式*/
.PwindowMain .tableBox table tbody::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
}

.PwindowMain .tableBox table tbody::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: #7dafe4;
}

.PwindowMain .tableBox table tbody::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(29, 94, 164, 0.4);
    /* background: #ededed; */
    border-radius: 10px;

}

效果:
原声表格中将thead固定,tobody超出高度滚动,滚动条样式改变

注意:

td的text-overflow : ellipsis和overflow : hidden都会起作用,但是这里也有几个地方要注意:
text-overflow : ellipsis生效的前提是
overflow不为visible,最好是类似hidden的值
需要指定table的width
如果td的宽度加起来超过table的width,即使给table加上overflow:hidden,td也不会被隐藏。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/79807.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!