javascript - 怎么样使pc端的table嵌入移动端的时候能自适应

Question

Answer 1

table其实本身就有一定的自适应能力。
首先你的table的宽度肯定应该要设为100%了吧，这能保证在手机上铺满屏幕而不超出。
接着最好对每一列都按可能出现的字体长度设定好宽度比例，这样不至于有的字太多而挤成像图上的字那样，
当然如果列数太多的话在小的屏幕上怎么都没法做到比较好的显示效果。

Answer 2

折衷方法:

//父元素
overflow-x: auto;

Answer 3

把table塞入手机端的方式太暴力了吧
要效果好一点应该给手机做一个响应式的p布局模仿tabke

Answer 4

用bootstrap的自适应表格

...

Answer 5

多分几行，大屏的时候横在一块，小屏的时候浮动下去，就行列式布局那种效果

Answer 6

响应式表格拯救你：

/// <table class="response">

    <tr>
        <td class="short"></td>
        <td class="short"></td>
        <td class="long"></td>
        <td class="short"></td>
        <td class="short"></td>
    </tr>
   </table>

less || CSS

.response{
    @media (min-width: 1px) and (max-width:480px) {
        width:100%;
        display:block; 
    }
    @media (min-width: 480px) {
        display:tabel;
        width:480px;
    }
    td{
        @media (min-width: 1px) and (max-width:480px) {
            display:block; 
        }
        @media (min-width: 480px) {
            display:tabel-cell
        }
    }
    .short{
        @media (min-width: 1px) and (max-width:480px) {
            width:50%;
            float:left;
        }
    }
    .long{
        word-break:break-all
        @media (min-width: 1px) and (max-width:480px) {
            width:100%;
            float:none;
        }
        @media (min-width: 480px) {
            width:400px;
        }
    }    
}

PS:为毛html代码在SF上做不成代码样式？