How to add margin on table row

-1

I want add space between row on table like image below:

enter image description here

If possible please show your code to me.

edited Dec 31 '18 at 8:48

Brian Tompsett - 汤莱恩

4,2131338101

asked Dec 31 '18 at 4:12

Mengseng Oeng

616

1

please add your HTML and CSS

– Nick Parsons
Dec 31 '18 at 4:13

You can write new one. it just a simple table.

– Mengseng Oeng
Dec 31 '18 at 4:15

2

"If possible please show your code to me." You only need to show your code that you have used..

– Maniraj from Karur
Dec 31 '18 at 4:18

I try to add margin on <tr>, but it didn't work. Please told me how to add margin on table row?

– Mengseng Oeng
Dec 31 '18 at 4:21

1

you can't add margin to tr element, only td, and best to do with padding to could use style tag and use tr > td { padding: 20px; }

– David Bray
Dec 31 '18 at 4:26

|
show 3 more comments

-1

I want add space between row on table like image below:

enter image description here

If possible please show your code to me.

edited Dec 31 '18 at 8:48

Brian Tompsett - 汤莱恩

4,2131338101

asked Dec 31 '18 at 4:12

Mengseng Oeng

616

1

please add your HTML and CSS

– Nick Parsons
Dec 31 '18 at 4:13

You can write new one. it just a simple table.

– Mengseng Oeng
Dec 31 '18 at 4:15

2

"If possible please show your code to me." You only need to show your code that you have used..

– Maniraj from Karur
Dec 31 '18 at 4:18

I try to add margin on <tr>, but it didn't work. Please told me how to add margin on table row?

– Mengseng Oeng
Dec 31 '18 at 4:21

1

you can't add margin to tr element, only td, and best to do with padding to could use style tag and use tr > td { padding: 20px; }

– David Bray
Dec 31 '18 at 4:26

|
show 3 more comments

-1

I want add space between row on table like image below:

enter image description here

If possible please show your code to me.

edited Dec 31 '18 at 8:48

Brian Tompsett - 汤莱恩

4,2131338101

asked Dec 31 '18 at 4:12

Mengseng Oeng

616

I want add space between row on table like image below:

enter image description here

If possible please show your code to me.

html css html-table

edited Dec 31 '18 at 8:48

Brian Tompsett - 汤莱恩

4,2131338101

asked Dec 31 '18 at 4:12

Mengseng Oeng

616

edited Dec 31 '18 at 8:48

Brian Tompsett - 汤莱恩

4,2131338101

asked Dec 31 '18 at 4:12

Mengseng Oeng

616

edited Dec 31 '18 at 8:48

Brian Tompsett - 汤莱恩

4,2131338101

edited Dec 31 '18 at 8:48

Brian Tompsett - 汤莱恩

4,2131338101

edited Dec 31 '18 at 8:48

Brian Tompsett - 汤莱恩

4,2131338101

asked Dec 31 '18 at 4:12

Mengseng Oeng

616

asked Dec 31 '18 at 4:12

Mengseng Oeng

616

asked Dec 31 '18 at 4:12

Mengseng Oeng

616

1

please add your HTML and CSS

– Nick Parsons
Dec 31 '18 at 4:13

You can write new one. it just a simple table.

– Mengseng Oeng
Dec 31 '18 at 4:15

2

"If possible please show your code to me." You only need to show your code that you have used..

– Maniraj from Karur
Dec 31 '18 at 4:18

I try to add margin on <tr>, but it didn't work. Please told me how to add margin on table row?

– Mengseng Oeng
Dec 31 '18 at 4:21

1

you can't add margin to tr element, only td, and best to do with padding to could use style tag and use tr > td { padding: 20px; }

– David Bray
Dec 31 '18 at 4:26

|
show 3 more comments

1

please add your HTML and CSS

– Nick Parsons
Dec 31 '18 at 4:13

You can write new one. it just a simple table.

– Mengseng Oeng
Dec 31 '18 at 4:15

2

"If possible please show your code to me." You only need to show your code that you have used..

– Maniraj from Karur
Dec 31 '18 at 4:18

I try to add margin on <tr>, but it didn't work. Please told me how to add margin on table row?

– Mengseng Oeng
Dec 31 '18 at 4:21

1

you can't add margin to tr element, only td, and best to do with padding to could use style tag and use tr > td { padding: 20px; }

– David Bray
Dec 31 '18 at 4:26

please add your HTML and CSS

– Nick Parsons
Dec 31 '18 at 4:13

You can write new one. it just a simple table.

– Mengseng Oeng
Dec 31 '18 at 4:15

"If possible please show your code to me." You only need to show your code that you have used..

– Maniraj from Karur
Dec 31 '18 at 4:18

I try to add margin on <tr>, but it didn't work. Please told me how to add margin on table row?

– Mengseng Oeng
Dec 31 '18 at 4:21

you can't add margin to tr element, only td, and best to do with padding to could use style tag and use tr > td { padding: 20px; }

– David Bray
Dec 31 '18 at 4:26

|
show 3 more comments

4 Answers
4

active

oldest

votes

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>

https://www.w3schools.com/html/html_tables.asp

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing

answered Dec 31 '18 at 5:24

Partho63

1,029419

add a comment |

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

table {

  border-collapse:separate; 

  border-spacing: 0 1em;

}

https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

Or you can use the hacky approach. That give the appearance of margins between table rows i

tr{ 

    border: 5px solid white;

}

answered Dec 31 '18 at 4:25

paintball247

182216

add a comment |

The border-spacing property sets the distance between the borders of adjacent cells.

Note: This property works only when border-collapse is separate.

table {

  border-collapse: separate;

  border-spacing: 15px;

  }

answered Dec 31 '18 at 8:53

Sushil

735221

add a comment |

You cannot give margin to the table row. you can either give border-colapse and border spacing to the table or give border to table row and change its color to table background color. Plz refer below link.

Thanks

http://jsfiddle.net/x1hphsvb/10966/

answered Dec 31 '18 at 4:52

Xenio Gracias

52929

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53983509%2fhow-to-add-margin-on-table-row%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

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>

https://www.w3schools.com/html/html_tables.asp

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing

answered Dec 31 '18 at 5:24

Partho63

1,029419

add a comment |

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>

https://www.w3schools.com/html/html_tables.asp

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing

answered Dec 31 '18 at 5:24

Partho63

1,029419

add a comment |

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>

https://www.w3schools.com/html/html_tables.asp

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing

answered Dec 31 '18 at 5:24

Partho63

1,029419

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>

https://www.w3schools.com/html/html_tables.asp

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing

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>

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>

answered Dec 31 '18 at 5:24

Partho63

1,029419

answered Dec 31 '18 at 5:24

Partho63

1,029419

answered Dec 31 '18 at 5:24

Partho63

1,029419

answered Dec 31 '18 at 5:24

Partho63

1,029419

add a comment |

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

table {

  border-collapse:separate; 

  border-spacing: 0 1em;

}

https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

Or you can use the hacky approach. That give the appearance of margins between table rows i

tr{ 

    border: 5px solid white;

}

answered Dec 31 '18 at 4:25

paintball247

182216

add a comment |

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

table {

  border-collapse:separate; 

  border-spacing: 0 1em;

}

https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

Or you can use the hacky approach. That give the appearance of margins between table rows i

tr{ 

    border: 5px solid white;

}

answered Dec 31 '18 at 4:25

paintball247

182216

add a comment |

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

table {

  border-collapse:separate; 

  border-spacing: 0 1em;

}

https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

Or you can use the hacky approach. That give the appearance of margins between table rows i

tr{ 

    border: 5px solid white;

}

answered Dec 31 '18 at 4:25

paintball247

182216

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

table {

  border-collapse:separate; 

  border-spacing: 0 1em;

}

https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

Or you can use the hacky approach. That give the appearance of margins between table rows i

tr{ 

    border: 5px solid white;

}

answered Dec 31 '18 at 4:25

paintball247

182216

answered Dec 31 '18 at 4:25

paintball247

182216

answered Dec 31 '18 at 4:25

paintball247

182216

answered Dec 31 '18 at 4:25

paintball247

182216

add a comment |

The border-spacing property sets the distance between the borders of adjacent cells.

Note: This property works only when border-collapse is separate.

table {

  border-collapse: separate;

  border-spacing: 15px;

  }

answered Dec 31 '18 at 8:53

Sushil

735221

add a comment |

The border-spacing property sets the distance between the borders of adjacent cells.

Note: This property works only when border-collapse is separate.

table {

  border-collapse: separate;

  border-spacing: 15px;

  }

answered Dec 31 '18 at 8:53

Sushil

735221

add a comment |

The border-spacing property sets the distance between the borders of adjacent cells.

Note: This property works only when border-collapse is separate.

table {

  border-collapse: separate;

  border-spacing: 15px;

  }

answered Dec 31 '18 at 8:53

Sushil

735221

The border-spacing property sets the distance between the borders of adjacent cells.

Note: This property works only when border-collapse is separate.

table {

  border-collapse: separate;

  border-spacing: 15px;

  }

answered Dec 31 '18 at 8:53

Sushil

735221

answered Dec 31 '18 at 8:53

Sushil

735221

answered Dec 31 '18 at 8:53

Sushil

735221

answered Dec 31 '18 at 8:53

Sushil

735221

add a comment |

Thanks

http://jsfiddle.net/x1hphsvb/10966/

answered Dec 31 '18 at 4:52

Xenio Gracias

52929

add a comment |

Thanks

http://jsfiddle.net/x1hphsvb/10966/

answered Dec 31 '18 at 4:52

Xenio Gracias

52929

add a comment |

Thanks

http://jsfiddle.net/x1hphsvb/10966/

answered Dec 31 '18 at 4:52

Xenio Gracias

52929

Thanks

http://jsfiddle.net/x1hphsvb/10966/

answered Dec 31 '18 at 4:52

Xenio Gracias

52929

answered Dec 31 '18 at 4:52

Xenio Gracias

52929

answered Dec 31 '18 at 4:52

Xenio Gracias

52929

answered Dec 31 '18 at 4:52

Xenio Gracias

52929

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk