自定义 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,不让页面自适应,否则表格会被压缩)

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

猜你喜欢

转载自blog.csdn.net/qq_25687271/article/details/109445697