CSS for properly rendering tables inside of cards in Bootstrap 4
MIT License
CSS for properly rendering tables inside of cards in Bootstrap 4
While Bootstrap 3 supported tables inside of panels, tables are not supported in cards (the replacement for panels) in Bootstrap 4. Although the resulting visual glitches can be fixed using several helper classes on the card component and the table itself, this is something that would be nice if it would just work. Thus, this package provides the needed styles to use tables inside of cards in Bootstrap 4 without any additional helper classes. It also modifes the horizontal padding of table cells to match that of the card header, body, and footer.
npm install --save-dev bootstrap4-card-tables
Import the SASS source files into your app:
@import "~bootstrap4-card-tables/src/bootstrap4-card-tables";
Compiled (and optionally, minified) CSS is provided in the dist
directory:
https://unpkg.com/[email protected]/dist/bootstrap4-card-tables.css
https://unpkg.com/[email protected]/dist/bootstrap4-card-tables.min.css
Given the markup below, this package fixes the visual glitches without requiring any additional classes to be added to the markup.
<div class="card">
<div class="card-header">Card Header</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
<td>Row 3 Cell 3</td>
</tr>
</tbody>
</table>
<div class="card-footer">
Card Footer
</div>
</div>