html table滚动条 置顶,HTML页面如何实现table滚动条

HTML页面如何实现table滚动条

发布时间：2020-10-26 11:40:02

来源：亿速云

阅读：139

作者：小新

小编给大家分享一下HTML页面如何实现table滚动条，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

table scrollbar & header fixed有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。主要解决了几点问题：

1.table实现横纵滚动条

2.table表头固定

3.table列宽自适应

4.table内容不换行

主要代码块

css：.table-scroll {

width: calc(100% - 5px);

overflow-x: scroll;

white-space: nowrap;

}

.table-scroll table {

table-layout: fixed;

width: calc(100% - 10px);

background-color:darkseagreen ;

}

.table-scroll thead {

display: table-row;

background-color: bisque;

}

.table-scroll tbody {

overflow-y: scroll;

overflow-x: hidden;

display: block;

height: calc(100vh - 300px);

}

.table-scroll th,td {

width: 160px;

overflow: hidden;

text-overflow: ellipsis;

min-width: 160px;

border: 1px solid #808080;

}

h5, h6 {

color: cornflowerblue;

}

js：$(function() {