Tailwind CSS Border Collapse

The border-collapse utility of Tailwind CSS is used to control the collapsing of borders within a table. It allows you to specify how the borders of adjacent cells should be rendered.

Syntax

To use the border-collapse utility, you can simply add the .border-collapse class to any table element.

<table class="border-collapse">
  <!-- table content -->
</table>

Example

Let's see an example of how to use the border-collapse utility in Tailwind CSS.

<table class="border-collapse table-auto">
  <thead>
    <tr>
      <th class="px-4 py-2 border">Name</th>
      <th class="px-4 py-2 border">Email</th>
      <th class="px-4 py-2 border">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="px-4 py-2 border">John Doe</td>
      <td class="px-4 py-2 border">johndoe@example.com</td>
      <td class="px-4 py-2 border">25</td>
    </tr>
    <tr>
      <td class="px-4 py-2 border">Jane Smith</td>
      <td class="px-4 py-2 border">janesmith@example.com</td>
      <td class="px-4 py-2 border">30</td>
    </tr>
  </tbody>
</table>

Output

This will create a table with collapsed borders and with alternating row colors:

Explanation

In the above example, we have used the .border-collapse class to enable the collapsing of borders within the table. We have also used the .table-auto class to make the table width adjust automatically based on content.

In the table, we have used the .border class to add borders to the cells. The .px-4 and .py-2 classes are used to set the padding of the cells.

Use

The border-collapse utility can be used to create tables with collapsed borders or separated borders. It is useful when you want to remove the space between adjoining table cells and create a clean look.

Important Points

• The border-collapse utility can be used with the .table-auto class to adjust the table width based on content.
• The border-collapse utility can be used to create tables with collapsed borders or separated borders.
• The border class is used to add borders to table cells.
• You can use the odd: and even: prefixes with classes to style alternating rows.

Summary

• Use the .border-collapse class to enable the collapsing of borders within a table.
• Use the .table-auto class to adjust the table width based on content.
• Use the .border class to add borders to table cells.
• Use the odd: and even: prefixes with classes to style alternating rows.