今天在做一个项目时发现一个问题,需要实现将一个Html编写的表格要求实现能够自适应屏幕大小,在移动端上也能够正常浏览。

然而最简单的方法就是可以

td {  
 white-space: nowrap;  
}  

然后确实是可以实现表格的自适应了。
但是但是但是,我的表格的宽度有点宽,就像是这样的:
文字折行以后表格变形影响了布局
然后在窗体大小改变后,单元格就自动变形的很严重,一个格子里的所有文字都挤在一起。
于是最终决定放弃让表格自适应,而改为为这个表格添加单独的滚动条,保留用户较好的使用体验。
为父元素添加如下Css样式即可:

overflow:auto

让div内容超出后自动显示滚动条就可以啦。