CSS Extension To Fix Bootstrap Table In Card Issue

Preview:

Description:

This is a CSS extension used to fix a bug where the Bootstrap 4 table can NOT be full height when placed in a card.

How to use it:

Insert the CSS extension after Bootstrap’s stylesheet.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="dist/bootstrap4-card-tables.min.css">

Insert your HTML table into a Bootstrap card. Done.

<div class="card">
  <div class="card-header">
    Card Header
  </div>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">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>
  <div class="card-footer">
    Card Footer
  </div>
</div>

Changelog:

v1.2.1 (09/25/2019)

• Don’t modify table cell padding for small tables