Отзывчивый стол в Bootstrap с вертикальными заголовками

Question

У меня проблема с чувствительной таблицей Bootstrap: хотя она отлично работает для таблиц с горизонтальными заголовками, я не могу добиться того, чего хочу, с таблицей вертикальных заголовков.

У меня есть много таблиц с двумя столбцами для спецификаций, которые выглядят так:

<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% ширины для th, заполнить 70% слева с помощью td и, если этого недостаточно, развернуть вправо с помощью прокрутки, как это делает начальная загрузка для обычных таблиц откликов. .

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
 }