Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Table Layout

Quiz

Tailwind CSS Table Layout is a utility class that used to controll table layput algorithm.

Tailwind CSS Table Layout Classes

The following is the list of Tailwind CSS Table Layout Classes that provides an effective way of handling table layout.

Class	CSS Properties
table-auto	table-layout: auto;
table-fixed	table-layout: fixed;

Functionality of Tailwind CSS Table Layout Classes

table-auto: This class specifies that the table should be laid out according to some automatic layout algorithm. The browser will calculate the width of columns and cells based on their content.
table-fixed: This class specifies that the table should be laid out according to the provided fixed-table layout method.

Tailwind CSS Table Layout Class Examples

The following examples will illustrate the Tailwind CSS Table Layout class utility.

Auto Layout Table

By using `table-auto` class table will be laid out according to some automatic layout algorithm.

Example

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl mb-3">
        Tailwind CSS Table Layout
    </h1>
    <table class="border-collapse table-auto w-full
                  border border-slate-500">
        <thead>
            <tr>
                <th class="bg-green-600 border 
                           border-slate-600">
                    Acronym
                </th>
                <th class="bg-green-600 border 
                           border-slate-600">
                    Stand For
                </th>
                <th class="bg-green-600 border 
                           border-slate-600">
                    Description
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="bg-green-300 border 
                           border-slate-700">
                    HTML
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                    HyperText markup Language
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                     HTML is used to create content and
                     structure of any web page. 
                </td>
            </tr>
            <tr>
                <td class="bg-green-300 border 
                           border-slate-700">
                    CSS
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                    Cascading Style Sheets
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                     It's a style sheet language used
                     for describing the presentation
                     of a document written in a markup
                     language like HTML
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Fixed Layout Table

By using `table-fixed` class table will be laid out according to the provided fixed-table layout method.

Example

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl mb-3">
        Tailwind CSS Table Layout
    </h1>
    <table class="border-collapse table-fixed w-full
                  border border-slate-500">
        <thead>
            <tr>
                <th class="bg-green-600 border 
                           border-slate-600">
                    Acronym
                </th>
                <th class="bg-green-600 border 
                           border-slate-600">
                    Stand For
                </th>
                <th class="bg-green-600 border 
                           border-slate-600">
                    Description
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="bg-green-300 border 
                           border-slate-700">
                    HTML
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                    HyperText markup Language
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                     HTML is used to create content and
                     structure of any web page. 
                </td>
            </tr>
            <tr>
                <td class="bg-green-300 border 
                           border-slate-700">
                    CSS
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                    Cascading Style Sheets
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                     It's a style sheet language used
                     for describing the presentation
                     of a document written in a markup
                     language like HTML
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Print Page