CSS: How to Create a Gap Between Rows in a Table

CSS: how do I create a gap between rows in a table?

All you need:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

That assumes you want a 1em vertical gap, and no horizontal gap. If you're doing this, you should probably also look at controlling your line-height.

Sort of weird that some of the answers people gave involve border-collapse: collapse, whose effect is the exact opposite of what the question asked for.

How to add space between CSS table rows?

For Individual Cells

You can achieve this with a transparent border:

border: 5px solid transparent;

To do this for just the top and bottom of the cells, you can use:

border-bottom: 5px solid transparent;
border-top: 5px solid transparent;

.table {  display: table;}
.table-row {  display: table-row;}
.table-cell {  display: table-cell;  border: 5px solid transparent;}

<div class="table">  <div class="table-row">    <div class="table-cell">Row 1 Cell 1</div>    <div class="table-cell">Row 1 Cell 2</div>  </div>  <div class="table-row">    <div class="table-cell">Row 2 Cell 1</div>    <div class="table-cell">Row 2 Cell 2</div>  </div></div>

Space between CSS Table Rows

Use border-spacing to create the spacing.

And if you want the gaps to have no background color, move the background-color from the table to the table-rows.

.live-mu-table {  display: table;  margin-bottom: 5px;  padding-bottom: 5px;  position: relative;  margin-left: auto;  margin-right: auto;  width: 75%;  border-spacing: 0 3px;     /* new */}.live-mu-table-tr {  display: table-row;  height: 30px;  background-color: Azure;   /* moved */}.live-mu-table-tdq {  display: table-cell;  border: 1px solid #000;  width: 60%;  text-align: center;  vertical-align: middle;  cursor: pointer;}.live-mu-table-tda {  display: table-cell;  border: 1px solid #000;  width: 30%;  text-align: center;  vertical-align: middle;  cursor: pointer;}.live-mu-table-tdspacer1 {  display: table-cell;  border: 1px solid #000;  width: 10%;  text-align: center;  vertical-align: middle;}

<div class="live-mu-table">  <div class="live-mu-table-tr">    <div class="live-mu-table-tdq" id="a-1">q1</div>    <div class="live-mu-table-tdspacer1"></div>    <div class="live-mu-table-tda" id="a-3">A3</div>  </div>
  <div class="live-mu-table-tr">    <div class="live-mu-table-tdq" id="q-2">q2</div>    <div class="live-mu-table-tdspacer1"></div>    <div class="live-mu-table-tda" id="a-1-2">A1</div>  </div>
  <div class="live-mu-table-tr">    <div class="live-mu-table-tdq" id="q-3">q3</div>    <div class="live-mu-table-tdspacer1"></div>    <div class="live-mu-table-tda" id="a-2">A2</div>  </div></div>

How do I add gap between rows in table?

You can't do it exactly the way you want. Your options are:

add padding to every cell in the desired row: tr.this-one td { padding-bottom: 1em;}. This will use cells' background color.
add thick border to every cell in the desired row: tr.this-one td { border-bottom: 1em solid red;}. This will use border color you set, which you can make to match the background color you have.
add a row in the markup: <tr><td colspan="10"></td></tr> and style it the way you'd like. You can also have <thead>/<tfoot>/multiple <tbody> elements inside a table as a way to semantically group rows (but they're not styleable by themselves).

Spacing in a html table between rows

Another solution is:

.table {
    font-size: 18px;
    border-spacing: 0 10px;
    display: table;
    width: 100%;
    border-collapse: collapse;/*Set border-collapse: collapse*/
}

.row-group {
    display: table-row-group;
    width: 100%;
    border-bottom: 10px solid #ffffff;/*Change border color to white and apply only to bottom*/
}

fiddle

And one better one is to use pseudo-element after:

.row-group:after{
    content: "";
    height:20px;
    display: block;
}

fiddle example using after

You can adjust height according your needs.

how to insert gap between rows of a table?

you can try with css:

table tr {
    margin-bottom: 10px;
    display: table;
}

How to add space between table rows+ tailwind?

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>

How to put space between rows of a table which also have box shadow effect on hover?

I think you need something like this!

   <style>
 body {
  background-color:#f1f4f9;
 }

 #tbstud {
  width:50%;
  border-collapse:collapse;
  text-align:center;
 }

 #tbstud th, #tbstud td {
  padding:15px;
  background-color:#ffffff;
 }

 #tbstud tr {
  -webkit-transition:box-shadow 0.3s linear;
  -moz-transition:box-shadow 0.3s linear;
  -o-transition:box-shadow 0.3s linear;
  -ms-transition:box-shadow 0.3s linear;
  transition:box-shadow 0.3s linear;
 }

 #tbstud tr:hover {
  -webkit-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 #tbstud .empty-td {
  border-left: none;
  border-right: none;
  background: transparent!important;
  padding: 5px;
 }
</style>
<table id="tbstud">
 <tr>
  <th>Sr. No.</th>
  <th>Roll No.</th>
  <th>Name</th>
  <th>Class</th>
  <th>Address</th>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>1</td>
  <td>101</td>
  <td>Student 1</td>
  <td>MSc</td>
  <td>City 1</td>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>2</td>
  <td>102</td>
  <td>Student 2</td>
  <td>BCA</td>
  <td>City 2</td>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>3</td>
  <td>103</td>
  <td>Student 3</td>
  <td>BCA</td>
  <td>City 3</td>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>4</td>
  <td>104</td>
  <td>Student 4</td>
  <td>BA</td>
  <td>City 4</td>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>5</td>
  <td>105</td>
  <td>Student 5</td>
  <td>B.Tech.</td>
  <td>City 5</td>
 </tr>
</table>