具有响应表的引导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;
}