Table
‹ BackBasic, unstyled table:
First Name | Last Name |
---|---|
Jane | Doe |
<table> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>Jane</td> <td>Doe</td> </tr> </tbody> </table>
Spacing
Adding spacing can be done with the table
class. This will add padding around each cell and expand the table out to 100% width.
First Name | Last Name |
---|---|
Jane | Doe |
<table class="table"> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>Jane</td> <td>Doe</td> </tr> </tbody> </table>
If you want to remove the left/right padding on the first and last columns you can do so by adding the table__flush
class.
First Name | Last Name |
---|---|
Jane | Doe |
<table class="table table__flush"> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>Jane</td> <td>Doe</td> </tr> </tbody> </table>
Row styling
You can add borders between rows with table__bordered
:
First Name | Last Name |
---|---|
Jane | Doe |
Jane | Doe |
Jane | Doe |
<table class="table table__flush table__bordered"> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>Jane</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </tbody> </table>
Zebra striping can be implemented by adding the class table__striped
:
First Name | Last Name |
---|---|
Jane | Doe |
Jane | Doe |
Jane | Doe |
<table class="table table__striped"> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>Jane</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </tbody> </table>
Row highlighting can be added with table__highlight
First Name | Last Name |
---|---|
Jane | Doe |
Jane | Doe |
Jane | Doe |
<table class="table table__striped table__highlight"> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>Jane</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </tbody> </table>
Responsive tables
You can make your table stack with the class table__stack
, you will also need to indicate which elements hide by giving them the data-table-column-headings
attribute. Then duplicate the headings down to the cells with the data-table-heading
attribute.
First Name | Last Name |
---|---|
Jane | Doe |
Jane | Doe |
Jane | Doe |
<table class="table table__striped table__stack"> <thead data-table-column-headings> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td data-table-heading="First Name">Jane</td> <td data-table-heading="Last Name">Doe</td> </tr> <tr> <td data-table-heading="First Name">Jane</td> <td data-table-heading="Last Name">Doe</td> </tr> <tr> <td data-table-heading="First Name">Jane</td> <td data-table-heading="Last Name">Doe</td> </tr> </tbody> </table>
If you have a wide table but can't really stack it you can add a .table-container
element around your table to make it scrollable:
First Name | Last Name |
---|---|
Jane | Doe |
Jane | Doe |
Jane | Doe |
<div class="table-container"> <table class="table table__striped" style="width: 180%"> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>Jane</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </tbody> </table> </div>