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>

当我看着它时，它比应该的要大得多。这是一个可查看的codepen：

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

它所做的就是使每一列都变大。我希望它们整齐地对齐（占容器宽度的100％），并且仅在内容+填充大于视口宽度时才显示滚动条。

这应该很容易：）

Answer 1

实际上，我解决了这个问题。我要做的就是：

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

使用响应表引导4个相等的列宽

1 个答案: