引导程序中具有垂直标题的响应式表

Question

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

我有很多 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%，如果还不够，则像引导程序已经对普通响应表所做的那样向右扩展滚动。

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
 }