How to Add a Margin to a Table Row <Tr>

How to add a margin to a table row tr

Table rows cannot have margin values. Can you increase the padding? That would work. Otherwise you could insert a <tr class="spacer"></tr> before and after the class="highlighted" rows.

How to add margin on table row

You can use border-spacing. Here is an simple example.

table, th, td {  background: #ffffff;  padding: 5px;}table {  background: #999999;  border-spacing: 15px;}

<h2>Border Spacing</h2><p>Border spacing specifies the space between the cells.</p>
<table style="width:100%">  <tr>    <th>Firstname</th>    <th>Lastname</th>     <th>Age</th>  </tr>  <tr>    <td>Jill</td>    <td>Smith</td>    <td>50</td>  </tr>  <tr>    <td>Eve</td>    <td>Jackson</td>    <td>94</td>  </tr>  <tr>    <td>John</td>    <td>Doe</td>    <td>80</td>  </tr></table>
<p>Try to change the border-spacing to 5px.</p>

How can I add margin to Bootstrap table rows?

You could use multiple tbody elements, which may be a more semantically correct approach. Use borders as spacers:

tbody {
  border-bottom: 20px solid pink;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<table class="table table-striped">
  <thead>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>data1</td>
      <td>data1</td>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
      <td>data2</td>
      <td>data1</td>
    </tr>
    <tr class="mb-3">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr>
      <td><strong>Sum of data3</strong></td>
      <td>sum2</td>
      <td>sum2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>data1</td>
      <td>data1</td>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
      <td>data2</td>
      <td>data1</td>
    </tr>
    <tr class="mb-3">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr>
      <td><strong>Sum of data3</strong></td>
      <td>sum2</td>
      <td>sum2</td>
    </tr>
  </tbody>
</table>

CSS Cell Margin

Apply this to your first <td>:

padding-right:10px;

HTML example:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

How to add margin right to table

margin-right will not work if you set width to 100%.
What you could do is :

wrap table in a div tag. add margin to div
set table width to 100%

UPDATED
If you are creating a page layout, then you should be using divs instead of tables. Tables are appropriate for data display (like custom grid style view).

<div>
    <div style="margin-right:100px">
        <table style="width:100%">
            //your table
        </table>
    </div>
</div>

Hope it helps.

Padding a table row

The trick is to give padding on the td elements, but make an exception for the first (yes, it's hacky, but sometimes you have to play by the browser's rules):

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

First-child is relatively well supported: https://developer.mozilla.org/en-US/docs/CSS/:first-child

You can use the same reasoning for the horizontal padding by using tr:first-child td.

Alternatively, exclude the first column by using the not operator. Support for this is not as good right now, though.

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}

Left and right margin on a table row

I do not think this is possible with tables.

Here it is with divs and spans. I hope you like it:

<html>
 <head>
  <style>
   div#outer {
    border: 10px solid black;
    width: 30em;
   }
   div#header {
    background-color: red;
    color: white;
    text-align: center;
   }
   div.row {
    border-bottom: 1px dashed red;
    margin: 10px 20px;
    clear: both;
   }
   span.left {
    float: left;
   }
   span.right {
    margin-left: 10em;
   }
  </style>
</head>
 <body>
  <div id="outer">
  <div id="header">Some table head text</div>
   <div class="row">
    <span class="left">Col</span>
    <span class="right">Col</span>
   </div>
   <div class="row">
    <span class="left">Col</span>
    <span class="right">Col</span>
   </div>
   <div class="row">
    <span class="left">Col</span>
    <span class="right">Col</span>
   </div>
  </div>
 </body>
</html>

HTML/CSS table vertical margin

Table rows cannot have margin values. Can you increase the padding? That would work. Otherwise you could insert a <tr class="spacer"></tr> before and after the class="highlighted" rows.

The border-spacing property will work for this particular case.

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

How to add margins to the first row of td elements only

Table cells do not support margins. You can achieve desired output by using given or any similar approaches.

Add, increase padding on table cells.

.tableizer-firstrow td {
    background-color: #104E8B;
    color: white !important;
    padding: 8px; /*4 padding & 4 margin, so giving 8*/
}

Add a div inside table cell. Give margins to this newly added div.

.tableizer-firstrow td div {
    margin: 4px;
}

You may also add "transparent border" on table cells (only if you do not need borders of any specific color).

.tableizer-firstrow td {
    background-color: #104E8B;
    color: white !important;
    padding: 4px;
    border: 4px transparent solid;
}

Based on your comment "just want space between the blue backgrounds for each element".

.tableizer-firstrow td {
    background-color: #104E8B;
    color: white !important;
    padding: 8px; /*increase inner space*/
    border: 2px solid #CCC; /*increase outer space*/ 
}

Also refer : Using margin with display table-cell for more details.

How to Add a Margin to a Table Row <Tr>