Bootstrap 表：是不是可以让两行表成为移动友好的两列表？
Posted
技术标签:
【中文标题】Bootstrap 表：是不是可以让两行表成为移动友好的两列表？【英文标题】：Bootstrap table: is it possible to make two rows table become two columns table on mobile friendly?Bootstrap 表：是否可以让两行表成为移动友好的两列表？ 【发布时间】：2020-12-07 11:47:56 【问题描述】：我正在尝试在移动视图上将两行表格制作成两列表格。我附上了我想要实现的示例：
这是桌面视图中的表格：
这是它在移动屏幕上的外观：
但我设法实现的只是这个：
这是移动端的视图
我附上代码：
html：
<html>
<table class="col-sm-12 table-bordered table-striped table-condensed cf mt-5" id="table2">
<thead class="cf">
<tr style="width:100px;">
<th>Registo CTT</th>
<th>Comission1 </th>
<th>Comission2</th>
<th>Comission3</th>
<th>Comission4</th>
<th>Comission5</th>
<th>Comission6</th>
</tr>
<tr style="width:100px;">
<td>Comissão</td>
<td>€ 0.00</td>
<td>€ 0.00</td>
<td>€ 0.00</td>
<td>€ 0.00</td>
<td>€ 0.00</td>
<td>€ 0.00</td>
</tr>
</thead>
</table>
</html>
CSS：
@media(max-width: 600px)
#table2 td
display: table-row;
#table2 th
display: table-row;
#table2 > tr
display: inline-block !important;
width: 20px !important;
也许有人建议我如何改进它，让它看起来像我想要的那样？谢谢！
【问题讨论】：
【参考方案1】：您需要的是数据透视表（而不是行上的数据，而是列上的数据）。有几个库可以做到这一点，这似乎是一个很好的资源：@987654321@
有些只使用 CSS，有些只使用 JS，这取决于您的需要
【讨论】：
以上是关于Bootstrap 表：是不是可以让两行表成为移动友好的两列表？的主要内容，如果未能解决你的问题，请参考以下文章