25 Tailwind Tables

About a code

Responsive Table

Hides columns as screen gets smaller and displays a toggle icon to view the rest of the data.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.dataTables.css, responsive.dataTables.css, jquery.js, jquery.dataTables.js, dataTables.responsive.js

Tailwind version: 2.2.19

About a code

Tailwind CSS Table

Use this table component to show tabular data inside rows and columns.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

About a code

Tailwind CSS Advance Table Component

The Tailwind table components serve as a holder for different components.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

About a code

Table Visits

Chart table with visits data.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: fontawesome.css

Tailwind version: 2.2.4

About a code

Table Social

Table social traffic data.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: fontawesome.css

Tailwind version: 2.2.4

About a code

Responsive Table with TailwindCSS

Building a table component with TailwindCSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

About a code

Responsive Table

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

About a code

Customers Table

A simple customers table with horizontal scroll built with Tailwind.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

About a code

Card Table

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: fontawesome.css

Tailwind version: 2.2.4

About a code

Projects Table

Projects table component.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

About a code

English Premier League Table with Tailwind CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

About a code

Table Style #1

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

About a code

Table #1

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

About a code

Table #2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

About a code

Table #3

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

About a code

Table #4

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

About a code

Customers Table with Horizontal Scroll - Tailwind CSS

A responsive table with horizontal scroll showing customers made with Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

About a code

Lo-fi Tailwind CSS Table - Fixed Header + Footer

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

About a code

Lo-fi Tailwind CSS Feature Comparison Table

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

About a code

Tables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.5.2

About a code

Tailwind CSS - Pricing Table #2

Pricing table block using Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

About a code

Tailwind Table Responsive with Filters

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

About a code

Table Responsive with Filters

Table with filters and pagination.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.0.4

About a code

User Table

A user table for TailwindCSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.0.3

About a code

Fixed Height Scrollable Table

Displaying a table using Flexbox allows you to apply fixed heights to certain areas. In this example, the table body has a height of 50vh, or half the viewport. Because Flexbox styles overwrite many table defaults, we need to reset them using flex properties instead. This example uses TailwindCSS, but the same techniques can be applied with vanilla CSS or any other Flexbox supporting framework. Note how flex styles are being applied to the table head, table body, and table row tags. Also, note the fixed widths being applied to each.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 0.3.0