今天发现一个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