自定义 table 布局 实现横向滚动(不会被页面挤压变形)

<div class="table" style="overflow: auto; overflow-x: hidden;">

    <div class="table-scroll" style="overflow: scroll;">

         <div class="table-content" style="width: 1500px; min-width: 100%; table-layout: fixed;">

         </div>

    </div>

</div>

主要的css: 第一层:overflow: auto; overflow-x: hidden; (横向滚动,隐藏溢出的元素)

第二层: overflow: scroll;(可以拖动页面滚动)

第三层:width: 1500px; min-width: 100%;(设置一个固定的width,不让页面自适应,否则表格会被压缩)

可以实现表格随着页面伸缩,不会被挤压变形。并能左右移动

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值