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>

在桌面上，可视化没有问题，但在智能手机上，文本被混淆，因此无法读取。我想做的是保留宽度为30％的宽度，用td填充70％，如果还不够，则在右侧展开，像bootstrap一样滚动已经为正常的reponsive-tables做了

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
 }

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

1 个答案: