How to add space between table rows+ tailwind? - css

Question

guys I am new to tailwind and trying to add space between table rows.
<table className="table-auto w-full shadow-md mt-5 rounded">
<thead className="bg-base-200 text-left text-gray-700 tracking-wider">
<tr>
<th className="p-4 ">Chapter Number</th>
<th className="p-4 ">Chapter Name</th>
<th className="p-4 ">Added at</th>
<th className="p-4 ">Status</th>
</tr>
</thead>
<tbody>
{chapters.map((chapter) => (
<tr className="bg-card mt-6 rounded" key={chapter.chapterNumber}>
<td className="p-4">{chapter.chapterNumber}</td>
<td className="p-4">{chapter.chapterName}</td>
<td className="p-4">{chapter.addedAt}</td>
<td className="p-4">{!chapter.published && 'Not published'}</td>
</tr>
))}
</tbody>
</table>
This does not add space between the table rows.
So,I have tried with mt-6 on each rows. It has no effect.
I have seen a similar question and used the answer here and have added border-spacing and border-seperate.
So, now my table row has these classes.
<table className="table-auto w-full shadow-md mt-5 border-spacing-2 border-separate rounded">
But this results in adding space around all the elements.
I do not understand why table row behaves this way and does not take the margin with mt-6.
But if i replace the rows with a div, it applies the margin top.
eg:
<div className="">
<th className="p-4 ">Chapter Number</th>
<th className="p-4 ">Chapter Name</th>
<th className="p-4 ">Added at</th>
<th className="p-4 ">Status</th>
</div>
<div className="mt-6 bg-card">
<th className="p-4 ">1</th>
<th className="p-4 ">Chapter Name</th>
<th className="p-4 ">04/2/2022</th>
<th className="p-4 ">Not published</th>
</div>
<div className="mt-6 bg-card">
<th className="p-4 ">1</th>
<th className="p-4 ">Chapter Name</th>
<th className="p-4 ">04/2/2022</th>
<th className="p-4 ">Not published</th>
</div>

Answer 1

First you need to split the borders with Tailwind border-separate property on the table tag, then add border-spacing-y-3 where: y is the axis and number is the height between row.
Utilities for controlling the spacing between table borders. Tailwind documentation
<script src="https://cdn.tailwindcss.com"></script>
<table class="table-auto w-full shadow-md mt-5 rounded bg-black border-separate border-spacing-y-3">
<thead class="text-left text-gray-500 tracking-wider">
<tr>
<th class="p-4">Chapter Number</th>
<th class="p-4">Chapter Name</th>
<th class="p-4">Added at</th>
<th class="p-4">Status</th>
</tr>
</thead>
<tbody class="">
<tr class="bg-card rounded text-gray-200 bg-neutral-900">
<td class="p-4">60001</td>
<td class="p-4"></td>
<td class="p-4">6/21/2022</td>
<td class="p-4">Not published</td>
</tr>
<tr class="bg-card rounded text-gray-200 bg-neutral-900">
<td class="p-4">60001</td>
<td class="p-4"></td>
<td class="p-4">6/21/2022</td>
<td class="p-4">Not published</td>
</tr>
</tbody>
</table>

Answer 2

Use border-seperate and border-spacing-y-4 to add vertical magin only.
<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-black">
<table class="table-auto w-full shadow-md rounded border-separate border-spacing-y-4">
<thead class="text-white text-left bg-gray-900 tracking-wider">
<tr>
<th class="p-4 ">Chapter Number</th>
<th class="p-4 ">Chapter Name</th>
<th class="p-4 ">Added at</th>
<th class="p-4 ">Status</th>
</tr>
</thead>
<tbody class="">
<tr class="bg-stone-800 mt-6 text-white rounded" key={chapter.chapterNumber}>
<td class="p-4">{chapter.chapterNumber}</td>
<td class="p-4">{chapter.chapterName}</td>
<td class="p-4">{chapter.addedAt}</td>
<td class="p-4">{!chapter.published && 'Not published'}</td>
</tr>
<tr class="bg-stone-800 mt-6 text-white rounded" key={chapter.chapterNumber}>
<td class="p-4">{chapter.chapterNumber}</td>
<td class="p-4">{chapter.chapterName}</td>
<td class="p-4">{chapter.addedAt}</td>
<td class="p-4">{!chapter.published && 'Not published'}</td>
</tr>
<tr class="bg-stone-800 mt-6 text-white rounded" key={chapter.chapterNumber}>
<td class="p-4">{chapter.chapterNumber}</td>
<td class="p-4">{chapter.chapterName}</td>
<td class="p-4">{chapter.addedAt}</td>
<td class="p-4">{!chapter.published && 'Not published'}</td>
</tr>
<tr class="bg-stone-800 mt-6 text-white rounded" key={chapter.chapterNumber}>
<td class="p-4">{chapter.chapterNumber}</td>
<td class="p-4">{chapter.chapterName}</td>
<td class="p-4">{chapter.addedAt}</td>
<td class="p-4">{!chapter.published && 'Not published'}</td>
</tr>
</tbody>
</table>
</div>