How to fix table row not accepting a margin with CSS table layout?

Spread the love

Sometimes, we want to fix a table row not accepting a margin with CSS table layout.

In this article, we’ll look at how to fix a table row not accepting a margin with CSS table layout.

How to fix table row not accepting a margin with CSS table layout?

To fix a table row not accepting a margin with CSS table layout, we set the border-spacing property.

For instance, we write

<table>
  <tr>
    <td>Section 1</td>
  </tr>
  <tr>
    <td>row1 1</td>
  </tr>
  <tr>
    <td>row1 2</td>
  </tr>
  <tr>
    <td class="row-seperator">Section 2</td>
  </tr>
  <tr>
    <td>row2 1</td>
  </tr>
  <tr>
    <td>row2 2</td>
  </tr>
</table>

to add a table.

Then we write

#options table {
  border-spacing: 8px;
}

to set the border-spacing to add a margin between each row.

Conclusion

To fix a table row not accepting a margin with CSS table layout, we set the border-spacing property.

Leave a Reply

Your email address will not be published. Required fields are marked *