Tailwind CSS - Border Collapse

Previous
Quiz
Next

Tailwind CSS Border Collapse is a utility class that used to controll whether table borders should collapse or be separated.

Tailwind CSS Border Collapse Classes

The following is the list of Tailwind CSS Border Collapse Classes that provides an effective way of handling table borders.

Class CSS Properties
border-collapse border-collapse: collapse;
border-separate border-collapse: separate;

Functionality of Tailwind CSS Border Collapse Classes

  • border-collapse: This class specifies borders are collapsed to make a single border. Two adjacent cells will share a border.
  • border-separate: This class specifies borders are separated. Every cell has its own border, and none of these borders are shared with other cells in the table.

Tailwind CSS Border Collapse Class Examples

The following examples will illustrate the Tailwind CSS Border Collapse class utility.

Table Border Collapse

By using `border-collapse` class we can create a table where two adjacent cells will share a border.

Example

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

<body class="p-4">
    <h1 class="text-3xl mb-3">
        Tailwind CSS Border Collapse
    </h1>
    <table class="border-collapse w-full
                  border border-slate-500">
        <thead>
            <tr>
                <th class="bg-green-600 border 
                           border-slate-600 w-1/3">
                    Acronym
                </th>
                <th class="bg-green-600 border 
                           border-slate-600 w-2/3">
                    Stand For
                </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>
            </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>
            </tr>
        </tbody>
    </table>
</body>

</html>

Table Border Separate

By using `border-separate` class we can create a table where every cell has its own border, and none of these borders are shared with other cells in the table.

Example

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

<body class="p-4">
    <h1 class="text-3xl mb-3">
        Tailwind CSS Border Collapse
    </h1>
    <table class="border-separate w-full
                  border border-slate-500">
        <thead>
            <tr>
                <th class="bg-green-600 border 
                           border-slate-600 w-1/3">
                    Acronym
                </th>
                <th class="bg-green-600 border 
                           border-slate-600 w-2/3">
                    Stand For
                </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>
            </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>
            </tr>
        </tbody>
    </table>
</body>

</html>
Print Page
Previous
Next
Advertisements