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() {

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值