Documentation
Tables
Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
Basic Table
The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwheling them with visuals.
The .table class adds basic styling to a table:
| Name | Title | Role | ||
|---|---|---|---|---|
| Paweł Kuna | UI Designer, Training | [email protected] | User | Edit |
| Jeffie Lewzey | Chemical Engineer, Support | [email protected] | Admin | Edit |
| Mallory Hulme | Geologist IV, Support | [email protected] | User | Edit |
| Dunn Slane | Research Nurse, Sales | [email protected] | Owner | Edit |
| Emmy Levet | VP Product Management, Accounting | [email protected] | Admin | Edit |
<div class="table-responsive">
<table
class="table table-vcenter">
<thead>
<tr>
<th>Name</th>
<th>Title</th>
<th>Email</th>
<th>Role</th>
<th class="w-1"></th>
</tr>
</thead>
<tbody>
<tr>
<td >Paweł Kuna</td>
<td class="text-muted" >
UI Designer, Training
</td>
<td class="text-muted" ><a href="#" class="text-reset">[email protected]</a></td>
<td class="text-muted" >
User
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
<tr>
<td >Jeffie Lewzey</td>
<td class="text-muted" >
Chemical Engineer, Support
</td>
<td class="text-muted" ><a href="#" class="text-reset">[email protected]</a></td>
<td class="text-muted" >
Admin
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
<tr>
<td >Mallory Hulme</td>
<td class="text-muted" >
Geologist IV, Support
</td>
<td class="text-muted" ><a href="#" class="text-reset">[email protected]</a></td>
<td class="text-muted" >
User
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
<tr>
<td >Dunn Slane</td>
<td class="text-muted" >
Research Nurse, Sales
</td>
<td class="text-muted" ><a href="#" class="text-reset">[email protected]</a></td>
<td class="text-muted" >
Owner
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
<tr>
<td >Emmy Levet</td>
<td class="text-muted" >
VP Product Management, Accounting
</td>
<td class="text-muted" ><a href="#" class="text-reset">[email protected]</a></td>
<td class="text-muted" >
Admin
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Responsive tables
Use the .table-responsive class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use .table-responsive{-sm|-md|-lg|-xl}. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.
| # | Heading 1 | Heading 2 | Heading 3 | Heading 4 | Heading 5 | Heading 6 | Heading 7 | Heading 8 | Heading 9 | Heading 10 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<table class="table table-responsive">
<thead>
<tr>
<th>#</th>
<th class="text-nowrap">Heading 1</th>
<th class="text-nowrap">Heading 2</th>
<th class="text-nowrap">Heading 3</th>
<th class="text-nowrap">Heading 4</th>
<th class="text-nowrap">Heading 5</th>
<th class="text-nowrap">Heading 6</th>
<th class="text-nowrap">Heading 7</th>
<th class="text-nowrap">Heading 8</th>
<th class="text-nowrap">Heading 9</th>
<th class="text-nowrap">Heading 10</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th>2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>No wrap
If you don’t want the table cell content to wrap to another line, use the table-nowrap class.
| Name | Title | Role | |||
|---|---|---|---|---|---|
| Paweł Kuna | UI Designer, Training | [email protected] | User | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates. | Edit |
| Jeffie Lewzey | Chemical Engineer, Support | [email protected] | Admin | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates. | Edit |
| Mallory Hulme | Geologist IV, Support | [email protected] | User | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates. | Edit |
| Dunn Slane | Research Nurse, Sales | [email protected] | Owner | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates. | Edit |
| Emmy Levet | VP Product Management, Accounting | [email protected] | Admin | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates. | Edit |
<div class="table-responsive">
<table
class="table table-vcenter table-nowrap">
<thead>
<tr>
<th>Name</th>
<th>Title</th>
<th>Email</th>
<th>Role</th>
<th></th>
<th class="w-1"></th>
</tr>
</thead>
<tbody>
<tr>
<td >Paweł Kuna</td>
<td class="text-muted" >
UI Designer, Training
</td>
<td class="text-muted" ><a href="#" class="text-reset">[email protected]</a></td>
<td class="text-muted" >
User
</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
<tr>
<td >Jeffie Lewzey</td>
<td class="text-muted" >
Chemical Engineer, Support
</td>
<td class="text-muted" ><a href="#" class="text-reset">[email protected]</a></td>
<td class="text-muted" >
Admin
</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
<tr>
<td >Mallory Hulme</td>
<td class="text-muted" >
Geologist IV, Support
</td>
<td class="text-muted" ><a href="#" class="text-reset">[email protected]</a></td>
<td class="text-muted" >
User
</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
<tr>
<td >Dunn Slane</td>
<td class="text-muted" >
Research Nurse, Sales
</td>
<td class="text-muted" ><a href="#" class="text-reset">[email protected]</a></td>
<td class="text-muted" >
Owner
</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
<tr>
<td >Emmy Levet</td>
<td class="text-muted" >
VP Product Management, Accounting
</td>
<td class="text-muted" ><a href="#" class="text-reset">[email protected]</a></td>
<td class="text-muted" >
Admin
</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>