adding spaces/margin in between rows that have borders

[jbiddulph]

Hi,
I would like to add spaces 40px gaps/spaces between my bordered rows on my table, please help?

<table class="container mx-auto my-7">
        <thead class="text-left bg-gradient-to-r from-white to-light-gray my-7 rounded-lg p-4 text-sm md:text-lg border-0">
          <th class="md:pl-20 rounded-l-lg py-4 px-2">
            Departure Time
          </th>
          <th class="py-4 px-2">
            City Name
          </th>
          <th class="py-4 px-2">
            Code
          </th>
          <th class="py-4 px-2">
            Airline
          </th>
          <th class="py-4 px-2">
            Gate
          </th>
          <th class="py-4 px-2 rounded-r-lg pr-2">
            Status
          </th>
        </thead>
        <tbody class="rounded">
          <tr v-for="(departure, i) in allDepartures"
          :key="departure.id"
          :index="i" class="content-center items-center row h-24 text-sm md:text-2xl border-white border-2 rounded-l-lg rounded-r-lg my-7 text-white font-bold">
            <td class="md:pl-20 p-4 my-7 px-2">{{ departure.scheduledDepartureDateTime.slice(-8, -3) }}</td>
            <td class="text-dark-yellow px-2">{{ departure.arrivalAirport.name.replace(" Airport", "") }}<br /><span class="text-light-yellow">{{ departure.arrivalAirport.countryName }}</span></td>
            <td class="px-2">{{ departure.arrivalAirport.code.toUpperCase() }}</td>
            <td class="px-2">{{ departure.airline.name }}</td>
            <td class="px-2">
              <!-- <div v-if="departure.departureGate.name.length">{{ departure.departureGate.name }}</div> -->
              <span class="text-dark-yellow">here</span>
            </td>
            <td class="rounded-r-lg px-2">
              <span class="border-l-8 border-solid border-light-yellow bg-white rounded-r-full flex text-black rounded-l-sm p-2 px-4 w-40">{{ departure.status }}</span>
            </td>
          </tr>
        </tbody>
      </table>

[wongjn]

I think what you need is border-spacing.

[wongjn]

Yes, border-spacing can be used to add spacing between rows, akin to margin.

[jbiddulph]

it's not working

[wongjn]

Have you also set border-collapse to separate? As per the docs:

This property applies only when border-collapse is separate.

[jbiddulph]

https://github.com/jbiddulph/departure-times

[wongjn]

Tailwind Play of your example with spaced borders