Bootstrap 4 одинаковой ширины столбца с адаптивной таблицей

Question

Итак, я столкнулся с этой проблемой и обнаружил этот стек: Самозагрузка 4, размер столбца таблицы

, который предполагает, что вы можете добавить d-flex к вашему tr, а затем просто использоватьcol-3 или что-то еще, чтобы определить размер столбца.Это звучит хорошо, но на практике это не работает так, как я надеялся.

У меня есть эта простая таблица:

<div class="table-responsive">
  <table class="table table-borderliness table-product">
    <tbody>
      <tr class="d-flex">
        <td class="col-3" scope="row">Weight</td>
        <td class="col-3 table-active">Light</td>
        <td class="col-3">Midweight</td>
        <td class="col-3">Heavy</td>
        <td class="col-3"></td>
      </tr>
      <tr class="d-flex">
        <td class="col-3" scope="row">Size</td>
        <td class="col-3 table-active">Small</td>
        <td class="col-3">Large</td>
        <td class="col-3"></td>
        <td class="col-3"></td>
      </tr>
    </tbody>
  </table>
</div>

И когда я смотрю на это, этогораздо больше, чем должно быть.Вот кодекс, чтобы увидеть:

https://codepen.io/r3plica/pen/dgzvpz

Что он сделал, так это сделал каждый столбец массивным.Я хочу, чтобы они аккуратно помещались в линию (100% ширины контейнера) и отображали полосу прокрутки только в том случае, если содержимое + отступ больше ширины области просмотра.

Это должно быть просто:)

Answer 1

На самом деле, я решил это.Все, что мне нужно было сделать, это:

.table-product [class^="col-"] {
    flex-shrink: 1;
}