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

【问题标题】：Transpose HTML table in Mobile/Tablet view in bootstrap在引导程序中的移动/平板电脑视图中转置 HTML 表格
【发布时间】：2016-05-26 22:27:23
【问题描述】：

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

【问题讨论】：

How to invert (transpose) the rows and columns of an HTML table?的可能重复

标签： html twitter-bootstrap-3 angular-ui-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

这是一个选项，但我不想隐藏任何列...因为用户决定将基于所有字段。
然后你可以实现这个创建一个带有分页的自定义表格。 Onclick 接下来，您可以使用 ajax 加载新的数据值。你想用什么语言实现？ php
不，我想用 AngularJS 来做这个，api 将发送 JSON 数组。
@GufranKhan 你能解释一下你想要什么吗？ angularJS中使用json数组作为表值的响应式foo表？
@GufranKhan 只需添加 jquery 和 foo-table css 样式表，然后您就可以像普通的 html 表一样创建表，类名和数据属性很少。并且您像通常使用 ng-repeat 一样处理 json 数组，您循环遍历数据以填充数据行。

【解决方案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;}
}

【讨论】：