利用CSS使table表格显示横向滚动条

发布时间:2019-07-22 10:35:28 阅读:73
在制作网页的时候经常会使用表格的形式来展现一些数据。但是在使用表格时,如果是较小的屏幕,表格的展现形式会有一些怪异,比如td横向溢出,排版错位,或者文字显示不全等等。

在网上搜索了一部分相关的问题后发现,大部分回答都是把一个div标签嵌套在table的外层,然后把外层div的宽度设置比里面的table宽一点,再加上overflow:scroll,或者是为table编写好几十行的css样式。

为table添加滚动条的搜索结果

那么如何用简单的几行css代码就解决这个问题呢?

利用display:block

话不多说,直接看代码

	@media only screen and (min-width: 320px) and (max-width: 767px) {    //利用媒体查询,设置指定屏幕尺寸:最小宽度320px~最大宽度767px,可以自定义设置
    table,
    .table {
        display: block !important;    //设置table的display属性的属性值为block
        width: 100%;    //设置宽度为100%
        overflow-x: scroll;    //水平溢出滚动,设置成auto也可以
    }
}  

以上代码的意思是,当屏幕尺寸在320px~767px之间,元素table和类名为.tabledisplay属性值为block,也就是块级元素;水平如果溢出就显示滚动条。

最好把tabletable-layout属性的属性值设置为:fixed

效果如下(需在小于767px下查看)

未显示滚动条

浏览器 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本支持 41.0 (Yes) 44 11 17 ?
暂存死区 ? (Yes) 35 ? ? ?
let expression 未实现 未实现 未实现 未实现 未实现 未实现
let block 未实现 未实现 未实现 未实现 未实现 未实现

显示滚动条

浏览器 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本支持 41.0 (Yes) 44 11 17 ?
暂存死区 ? (Yes) 35 ? ? ?
let expression 未实现 未实现 未实现 未实现 未实现 未实现
let block 未实现 未实现 未实现 未实现 未实现 未实现

我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"利用CSS使table表格显示横向滚动条",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560