Column auto width based on content in tables

Question

Can I use col-{breakpoint}-auto in tables (or something simmilar)?

Using the col-{breakpoint}-auto classes, columns can size itself based on the natural width of its content.

Answer 1

You can use them in <table>s too, but as far as I consider .col-auto is kind of the default behavior for table columns.

Have a look at the example below. When viewed in full screen (above the md breakpoint) all the columns behave as .col-auto. However, below the breakpoint, the first column that has a width specified (the second column in the example, with width: 100%;) takes up all the available space from the others.

Also, as another usage example, the Bootstrap docs mentions .col-auto in the context of form fields as well.

<table class="table">
  <thead>
    <tr>
      <th scope="col" class="col-auto">#</th>
      <th scope="col" class="col-md-auto">First</th>
      <th scope="col" class="col-md-auto">Last</th>
      <th scope="col" class="col-md-auto">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>