mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
f2e182dedf
Co-authored-by: Mustafa Ateş Uzun <mustafauzun0@gmail.com> Co-authored-by: Aditi Deshpande <aditideshpande2908@gmail.com> Co-authored-by: Bartłomiej Gawęda <bgaweda@abis.krakow.pl>
411 lines
11 KiB
Plaintext
411 lines
11 KiB
Plaintext
---
|
|
title: Tables
|
|
description: 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.
|
|
bootstrapLink: content/tables/
|
|
---
|
|
|
|
## 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 overwhelming them with visuals.
|
|
|
|
The `.table` class adds basic styling to a table:
|
|
|
|
```html code example height="360px" scrollable
|
|
<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-secondary">
|
|
UI Designer, Training
|
|
</td>
|
|
<td class="text-secondary"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
|
|
<td class="text-secondary">
|
|
User
|
|
</td>
|
|
<td>
|
|
<a href="#">Edit</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jeffie Lewzey</td>
|
|
<td class="text-secondary">
|
|
Chemical Engineer, Support
|
|
</td>
|
|
<td class="text-secondary"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
|
|
<td class="text-secondary">
|
|
Admin
|
|
</td>
|
|
<td>
|
|
<a href="#">Edit</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mallory Hulme</td>
|
|
<td class="text-secondary">
|
|
Geologist IV, Support
|
|
</td>
|
|
<td class="text-secondary"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
|
|
<td class="text-secondary">
|
|
User
|
|
</td>
|
|
<td>
|
|
<a href="#">Edit</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dunn Slane</td>
|
|
<td class="text-secondary">
|
|
Research Nurse, Sales
|
|
</td>
|
|
<td class="text-secondary"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
|
|
<td class="text-secondary">
|
|
Owner
|
|
</td>
|
|
<td>
|
|
<a href="#">Edit</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Emmy Levet</td>
|
|
<td class="text-secondary">
|
|
VP Product Management, Accounting
|
|
</td>
|
|
<td class="text-secondary"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
|
|
<td class="text-secondary">
|
|
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.
|
|
|
|
```html code example height="12rem"
|
|
<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.
|
|
|
|
```html example height="10rem"
|
|
<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-secondary">UI Designer, Training</td>
|
|
<td class="text-secondary">
|
|
<a href="#" class="text-reset">paweluna@howstuffworks.com</a>
|
|
</td>
|
|
<td class="text-secondary">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>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
```
|
|
|
|
```html
|
|
<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-secondary">
|
|
UI Designer, Training
|
|
</td>
|
|
<td class="text-secondary"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
|
|
<td class="text-secondary">
|
|
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-secondary">
|
|
Chemical Engineer, Support
|
|
</td>
|
|
<td class="text-secondary"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
|
|
<td class="text-secondary">
|
|
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-secondary">
|
|
Geologist IV, Support
|
|
</td>
|
|
<td class="text-secondary"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
|
|
<td class="text-secondary">
|
|
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-secondary">
|
|
Research Nurse, Sales
|
|
</td>
|
|
<td class="text-secondary"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
|
|
<td class="text-secondary">
|
|
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-secondary">
|
|
VP Product Management, Accounting
|
|
</td>
|
|
<td class="text-secondary"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
|
|
<td class="text-secondary">
|
|
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>
|
|
```
|
|
|
|
## Table Variants
|
|
|
|
```html code example height="360px" scrollable
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Class</th>
|
|
<th scope="col">Heading</th>
|
|
<th scope="col">Heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">Default</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-primary">
|
|
<th scope="row">Primary</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-secondary">
|
|
<th scope="row">Secondary</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-success">
|
|
<th scope="row">Success</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-danger">
|
|
<th scope="row">Danger</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-warning">
|
|
<th scope="row">Warning</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-info">
|
|
<th scope="row">Info</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-light">
|
|
<th scope="row">Light</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-dark">
|
|
<th scope="row">Dark</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
```
|
|
|
|
## Table with sticky header
|
|
|
|
```html example code scrollable
|
|
<table class="table">
|
|
<thead class="sticky-top">
|
|
<tr>
|
|
<th scope="col">Class</th>
|
|
<th scope="col">Heading</th>
|
|
<th scope="col">Heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">Default</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Primary</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Secondary</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Success</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Danger</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Warning</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Info</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Light</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-dark">
|
|
<th scope="row">Dark</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
```
|