How to set table border-spacing in tailwind css?

@orpha 

To set table border-spacing in Tailwind CSS, you can use the border-collapse utility class to control the spacing between table cells.

For example, to set a specific border-spacing value for a table, you can add the following classes to the <table> element:

1
2
3

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

You can replace border-gray-400 with any of the border utilities in Tailwind CSS to customize the border color.

Additionally, if you want to customize the spacing between table cells further, you can use the px, py, mx, and my utilities to add padding and margins to the <td> and <th> elements within the table.

Here is an example of how you can customize the spacing between the cells of a table using these utilities:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<table class="border-collapse border border-gray-400">
  <tr>
    <th class="px-4 py-2">Header 1</th>
    <th class="px-4 py-2">Header 2</th>
  </tr>
  <tr>
    <td class="px-4 py-2">Row 1, Cell 1</td>
    <td class="px-4 py-2">Row 1, Cell 2</td>
  </tr>
</table>

By using these utilities, you can easily control the border-spacing and overall design of tables in Tailwind CSS.