Tailwind CSS Table Layout

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. By using this class we can set the display of the layout of the table. In CSS, we do that by using the CSS table-layout property.

Table Layout classes:

• table-auto
• table-fixed

table-auto: This class is used to allow the table to automatically size columns to fit the contents of the cell.

Syntax:

<element class="table-auto">...</element>

Example:

Output:

👁 Image

table-fixed: This class is used to allow the table to ignore the content and use fixed widths for columns. The width of the first row will set the column widths for the whole table.

Syntax:

<element class="table-fixed">...</element>

Example:

Output:

👁 Image