Bootstrap中带有垂直标题的响应表

Question

我在使用 Bootstrap 响应式表格时遇到了问题：虽然它适用于带有水平标题的表格，但我无法使用垂直标题表格实现我想要的效果。

我有很多 2 列表的规格，如下所示：

<table class="table-responsive">
    <tr>
        <th>FRAME</th>
        <td>ALUMINUM</td>
    </tr>
    <tr>
        <th>POWER</th>
        <td>500W</td>
    </tr>
    <tr>
        <th>BATTERY</th>
        <td>9</td>
    </tr>
    <tr>
        <th>WEIGHT</th>
        <td>45KG</td>
    </tr>
    <tr>
        <th>PRICE</th>
        <td>333$</td>
    </tr>
</table>

在桌面上，可视化没有问题，但在智能手机上，文本被捣碎，无法阅读。我想做的是保留 th 宽度的 30%，用 td 填充左边的 70%，如果还不够，然后像 bootstrap 对普通响应表所做的那样滚动右侧展开.

Answer 1

您可以引导媒体查询以添加您的个人样式

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 
  table-responsive th {
    width: 30%
  }

table-responsive td {
    width: 70%
  }
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { 
  As per requirement, you can make changes for tablet as well
 }