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;
}