CSS实现表格table自适应

今天发现一个BUG,table表格不能自适应移动设备,最头疼的就是CSS了,特别是在别人写的CSS上修改,搜索后查到两种方案皆可,记录一下修复方法,以便查阅。

<style>
table {
table-layout: fixed;
width: 100%;
border: 1px solid rgb(82, 79, 79);
}
td {
border: 1px solid rgb(127, 127, 128);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

就这么简单,当然这种方式会让一部分内容隐藏起来,如果你想全部都显示出来,就把text-overflow: ellipsis;去掉。更加完美的方案如下

.table-container
{
width: 100%;
overflow-y: auto;
_overflow: auto;
margin: 0 0 1em;
}

直接给表格元素的容器table-container添加一个自适应的滚动条,搞定!

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/242122.html

(0)
上一篇 2022年4月7日
下一篇 2022年4月7日

相关推荐

发表回复

登录后才能评论