CODEWITHSUNDEEP
csstwitter-bootstrapflexbox
guettli
guettli

Reputation: 27826

Bootstrap: Shrink Column

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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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?

Upvotes: 2

Views: 261

Answers (2)

guettli
guettli

Reputation: 27826

"Sergey Kuznetsov" pointed me to the right direction.

Here is a solution based on bootstrap classes:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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").

Upvotes: 0

s.kuznetsov
s.kuznetsov

Reputation: 15213

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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 2

Related Questions