Bootstrap 4相等的列寬和響應表

Question

所以我遇到了這個問題，我發現了這個堆棧： bootstrap 4 table column sizing

這建議您可以在tr添加d-flex ，然后使用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;
}