Bootstrap 4相等的列宽和响应表

Question

So I ran into this issue and I found this stack: bootstrap 4 table column sizing

which suggests you can add d-flex to your tr and then just use the col-3 or whatever to size your column. That sounds good, but in practice, it doesn't work as well as I had hoped.

I have this simple table:

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

And when I look at it, it is much larger than it should be. Here is a codepen to see:

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

What it has done, is make each column massive. I want them to fit neatly in line (100% of the width of the container) and only show the scrollbar if the content + padding is larger than the viewport width.

This should be easy :)

Answer 1

Actually, I solved this one. All I had to do was:

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