Bootstrap 4等列宽与响应表

Question

所以我遇到了这个问题，我发现了这个堆栈： bootstrap 4 table column sizing

这表明您可以将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;
}