tabler/docs/content/ui/components/table.md

title, summary, bootstrapLink, description

title	summary	bootstrapLink	description
Table	A table is a useful interface element that lets you visualize data and arrange it clearly. It allows users to browse a lot of information at once, and a good table design improves readability.	content/tables/	Visualize data clearly with a table.

Basic Table

The basic table design has light padding and the presented data is separated with 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:

{% capture html -%}

Name	Title	Email	Role
Paweł Kuna	UI Designer, Training	paweluna@howstuffworks.com	User	Edit
Jeffie Lewzey	Chemical Engineer, Support	jlewzey1@seesaa.net	Admin	Edit
Mallory Hulme	Geologist IV, Support	mhulme2@domainmarket.com	User	Edit
Dunn Slane	Research Nurse, Sales	dslane3@epa.gov	Owner	Edit
Emmy Levet	VP Product Management, Accounting	elevet4@senate.gov	Admin	Edit

{%- endcapture %} {% include "docs/example.html" html=html %}

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.

{% capture html -%}

#	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

{%- endcapture %} {% include "docs/example.html" html=html %}

No wrap

If you don't want the table cell content to wrap to another line, use the table-nowrap class.

{% capture html -%}

Name	Title	Email	Role
Paweł Kuna	UI Designer, Training	paweluna@howstuffworks.com	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

{%- endcapture %} {% include "docs/example.html" html=html %}

Table Variants

{% capture html -%}

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

{%- endcapture %} {% include "docs/example.html" html=html %}

Table with sticky header

{% capture html -%}

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

{%- endcapture %} {% include "docs/example.html" html=html height="42rem" %}