今天发现一个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添加一个自适应的滚动条,搞定!





评论 (2)