Bootstrap: Shrink Column

user_633961 0
Viewed 171

I have a table with tree columns. I want the "small" column to be as small as possible.

I thought col-auto does that:

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
 <tr>
  <td>big1</td>
  <td class="col-auto">small</td>
  <td>big2</td>
 </tr>
</table>

How can I shrink the "small" column and give the space to the other columns?

flexbox twitter-bootstrap css
2 Answers

Class col-auto uses the flex rule, but your parent container is not defined as display: flex. Side tags td should be set to flex: 1.

.table.table-bordered tr {
  display: flex;
}

.table.table-bordered tr td:nth-child(1),
.table.table-bordered tr td:nth-child(3) {
  flex: 1;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
 <tr>
  <td>big1</td>
  <td class="col-auto">small</td>
  <td>big2</td>
 </tr>
</table>

user_135734440

"Sergey Kuznetsov" pointed me to the right direction.

Here is a solution based on bootstrap classes:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
 <tr class="d-flex">
  <td class="flex-grow-1">big1</td>
  <td>small</td>
  <td style="flex: 4">big2</td>
 </tr>
</table>

Since Bootstrap only supports flex-grow-0 and flex-grow-1 I added an example how to solve this with vanilla CSS (style="flex: 4").

user_6339610
Related