gpt4 book ai didi

html - 引导表 : is it possible to make two rows table become two columns table on mobile friendly?

转载 作者:行者123 更新时间:2023-12-04 09:04:56 26 4
gpt4 key购买 nike

我正在尝试在移动 View 上将两行表制作成两列表。我附上了我想要实现的示例:
这是它在桌面 View 中的外观:
This is the table how it looks on desktop view
这是它在手机屏幕上的外观:
This is how it should look on mobile screen
但我设法实现的只是这个:
这是手机上的 View
This is the view on mobile
我附上代码:
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;
}
}
也许有人建议我如何改进它,让它看起来像我想要的那样?谢谢!

最佳答案

你想要的是一个数据透视表(而不是行上的数据,数据是列上的)。有一些图书馆可以做到这一点,这似乎是一个很好的资源:https://css-tricks.com/responsive-data-table-roundup/
其中一些仅使用 CSS,有些仅使用 JS,具体取决于您的需要

关于html - 引导表 : is it possible to make two rows table become two columns table on mobile friendly?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63466131/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com