Question

是否可以在Mobile / Tablet中转置HTML表格，以便我们也可以在Mobile中显示所有列。下图是我想要实现的例子。

Answer 1

尝试将类table-responsive添加到html的表标记中。这是一个使表响应的引导类。

Answer 2

这就是你所需要的。它非常适合您的需求，您一定会喜欢它。

检查此链接 - foo表库/插件：https://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/

Answer 3

此链接将帮助您

TABLES RESPONSIVES WIDTH 100%

的index.html

<table>
    <thead>
        <tr>
            <th>Code</th>
            <th>Company</th>
            <th class="numeric">Price</th>
            <th class="numeric">Change</th>
            <th class="numeric">Change %</th>
            <th class="numeric">Open</th>
            <th class="numeric">High</th>
            <th class="numeric">Low</th>
            <th class="numeric">Volume</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>AAC</td>
            <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
            <td class="numeric">$1.38</td>
            <td class="numeric">-0.01</td>
            <td class="numeric">-0.36%</td>
            <td class="numeric">$1.39</td>
            <td class="numeric">$1.39</td>
            <td class="numeric">$1.38</td>
            <td class="numeric">9,395</td>
        </tr>
    </tbody>
</table>

css.css

@media only screen and (max-width: 800px) {
    #unseen table td:nth-child(2), 
    #unseen table th:nth-child(2) {display: none;}
}

@media only screen and (max-width: 640px) {
    #unseen table td:nth-child(4),
    #unseen table th:nth-child(4),
    #unseen table td:nth-child(7),
    #unseen table th:nth-child(7),
    #unseen table td:nth-child(8),
    #unseen table th:nth-child(8){display: none;}
}

在引导程序中的移动/平板电脑视图中转置HTML表格

3 个答案: