手机端自适应表格table样式如何写

有时候我们的网页需要展示一些表格的内容，在pc端是很好控制它的展现方式的，但是到移动端就非常难控制了，那么该怎么做呢？

比如上图就是没控制好的移动端的表格table样式，展示非常的凌乱。

 

这个就是写好的移动端的表格table样式，展现就非常的美观。

具体的移动端实现代码

table {
            table-layout: fixed !important;
            width: 100% !important;
            border-collapse:collapse;
            border:none;
            font-size:0.23rem;
        }
 
td,th {
            width:1px;
            white-space:nowrap; /* 自适应宽度*/
            word-break:keep-all; /* 避免长单词截断，保持全部 */
            border:solid #676767 1px;
            text-align:center;
            white-space:pre-line;
            word-break:break-all !important;
            word-wrap:break-word !important;
            display:table-cell;
            vertical-align:middle !important;
            white-space: normal !important;
            height:auto;
            vertical-align:text-top;
            padding:2px 2px 0 2px;
            display: table-cell;
        }