Space Between Two 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 break a line or space in between two rows of the html table

According to the CSS box model:

margin values do not apply to table rows and table cells

See: http://www.w3.org/TR/CSS2/box.html#margin-properties

padding and border values do not apply to table rows but apply to table cells

See: http://www.w3.org/TR/CSS2/box.html#padding-properties

A quick fix is to add padding to the top of the row that you want to separate.

For example: http://jsfiddle.net/audetwebdesign/caXsZ/

Sample HTML:

<table cellpadding="0" cellspacing="0" border="0">
    <tr class="row1">
        <td>Row One - 1</td>
        <td>Row One - 2</td>
    </tr>
    <tr class="row2">
        <td>Row Two - 1</td>
        <td>Row Two - 2</td>
    </tr>    
</table>

CSS:

td {
    border: 1px dotted blue;
}
tr.row2 td {
    padding-top: 40px;
}

If you want to style borders around your table cells, you may need to add wrappers around the content and apply borders depending on the design details.

Space between last two rows in a table

I think the only way is provide an empty <tr> before last <tr> like below...

   <table>    <tr>        <td>0</td>        <td>text1</td>    </tr>    <tr>        <td>1</td>        <td>text2</td>    </tr>    <tr>        <td colspan="2"> </td>    </tr>    <tr class="last" style="border-top: 5px solid blue;">        <td>3</td>        <td>text3</td>    </tr>    </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>

Space between two rows in bootstrap table

Set border-collapse and border-spacing...

.table {
    border-collapse: separate;
    border-spacing:0 20px;
}

https://www.codeply.com/go/76fzFtggt2

How to give space between two Table Rows In Material-UI Table Row

You need to put your TableRow inside Table component and in your TableRow container, add the following styles, it will set the border bottom in every row except the last one:

const useRowStyles = makeStyles({
  tableBody: {
    "& > :not(:last-child)": {
      borderBottom: "25px solid red"
    }
  }
});

<TableBody className={classes.tableBody}>
  <TableRow>
    {...}
  </TableRow>
  <TableRow>
    {...}
  </TableRow>
</TableBody>

Live Demo

Codesandbox Demo