如何在顺风的表格行之间添加空格？

Answer 1

首先，您需要使用 table 标签上的

Tailwind

border-separate 属性分割边框，然后添加

border-spacing-y-3

，其中：y 是轴，number 是行之间的高度。

用于控制表格边框之间间距的实用程序。 Tailwind 文档

<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

使用

border-seperate

和

border-spacing-y-4

仅添加垂直放大倍数。

<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>