How to add a margin to a table row tr

Question

I have a table containing many rows  Some of these rows are class  highlight  and signify a row that needs to be styled differently and highlighted  What I m trying to do is add some extra spacing before and after these rows so they appear slightly separated from the other rows    I thought I could get this done with margin-top 10px margin-bottom 10px  but it s not working  Anyone knows how to get this done  or if it could be done  Here s the HTML and I ve set the 2nd tr in the tbody to class highlight    lt table gt   lt thead gt     lt tr gt        lt th gt Header 1 lt  th gt        lt th gt Header 2 lt  th gt     lt  tr gt   lt  thead gt   lt tbody gt     lt tr gt        lt td gt Value1 lt  td gt        lt td gt Value2 lt  td gt     lt  tr gt     lt tr class  highlight  gt        lt td gt Value1 lt  td gt        lt td gt Value2 lt  td gt     lt  tr gt     lt tr gt        lt td gt Value1 lt  td gt        lt td gt Value2 lt  td gt     lt  tr gt     lt tr gt        lt td gt Value1 lt  td gt        lt td gt Value2 lt  td gt     lt  tr gt   lt  tbody gt   lt  table gt

User · Answer

For what is worth  I took advantage that I was already using bootstrap  4 3   because I needed to add margin  box-shadow and border-radius to my row  something I can t do with tables    lt div id  loop  class  table-responsive px-4  gt   lt section gt       lt div id  thead  class  row m-0  gt           lt div class  col  gt  lt  div gt           lt div class  col  gt  lt  div gt           lt div class  col  gt  lt  div gt       lt  div gt       lt div id  tbody  class  row m-0  gt           lt div class  col  gt  lt  div gt           lt div class  col  gt  lt  div gt           lt div class  col  gt  lt  div gt       lt  div gt   lt  section gt   lt  div gt    On css I added a few lines to mantain the table behavior of bootstrap   media  max-width  800px        loop          section              min-width  700px

User · Answer

add this style before the class  highlighted  padding-bottom and display is inline-table

User · Answer

A way to mimic the margin on the row would be to use the pseudo selector to add some spacing on the td    highlight td  before   highlight td  after     content       height 10px    display block      This way anything marked with the highlight class will be separated top and bottom   https   jsfiddle net d0zmsrfs

User · Answer

Another possibility is to use a pseudo selector  after or  before  tr highlight td last-child after     content    0a0     line-height  3em      That might avoid issues with browser that don t understand the pseudo selectors  plus background-colors are not an issue   The downside is however  that it adds some extra whitespace after the last cell

User · Answer

You might try to use CSS transforms for indenting a whole tr   tr indent      -webkit-transform  translate 20px 0      -moz-transform  translate 20px 0       I think this is a valid solution  Seems to work fine in Firefox 16  Chrome 23 and Safari 6 on my OSX

User · Answer

First of all  don t try to put a margin to a  lt tr gt  or a  lt td gt  because it won t work in modern rendering    Solution 1   Although margin doesn t work  padding does work    td      padding-bottom  10px      padding-top  10px      Warning   This will also push the border further away from the element  if your border is visible  you might want to use solution 2 instead    Solution 2   To keep the border close to the element and mimic the margin  put another  lt tr gt  between each of your reel table s  lt tr gt  like so     lt tr style  height  20px   gt   lt  -- Mimic the margin -- gt   lt  tr gt

User · Answer

Because margin is ignored on tr  I usually use a workaround  by setting a transparent border-bottom or border-top and setting the background-clip property to padding-box so the background-color does not get painted underneath the border   table      border-collapse  collapse      1        th  td     border-bottom  5px solid transparent      2       background-color  gold      3       background-clip  padding-box      4          Makes sure cells share a common border  but is completely optional  The solution works without it  The 5px value represents the margin that you want to achieve Sets the background-color of your row cell Makes sure the background get not painted underneath the border   see a demo here  http   codepen io meodai pen MJMVNR editors 1100  background-clip is supported in all modern browser   And IE9    Alternatively you could use a border-spacing  But this will not work with border-collapse set to collapse

User · Answer

Here s a neat way I did it   table tr       border-bottom  4px solid      That will add 4px of vertical spacing between each row   And if you wanted to not get that border on the last child   table tr last-child       border-bottom  0      Reminder that CSS3 pseudo-selectors will only work in IE 8 and below with selectivizr

User · Answer

Table rows cannot have margin values  Can you increase the padding  That would work  Otherwise you could insert a  lt tr class  spacer  gt  lt  tr gt  before and after the class  highlighted  rows

User · Answer

I gave up and inserted a simple jQuery code as below  This will add a tr after every tr  if you have so many trs like me  Demo  https   jsfiddle net acf9sph6    lt table gt     lt tbody gt        lt tr class  my-tr  gt           lt td gt one line lt  td gt        lt  tr gt        lt tr class  my-tr  gt           lt td gt one line lt  td gt        lt  tr gt        lt tr class  my-tr  gt           lt td gt one line lt  td gt        lt  tr gt     lt  tbody gt   lt  table gt   lt script gt    function                tr my-tr   after   lt tr class  tr-spacer   gt          lt  script gt   lt style gt   tr-spacer       height  20px     lt  style gt

User · Answer

line-height can be the possible solution  tr       line-height 30px

User · Answer

You can create space between table rows by adding an empty row of cells like this      lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt    CSS can then be used to target the empty cells like this     table  empty border none  height 10px     NB  This technique is only good if none of your normal cells will be empty vacant   Even a non-breaking space will do to avoid a cell from being targetted by the CSS rule above   Needless to mention that you can adjust the space s height to whatever you like with the height property included

User · Answer

A hack to give the appearance of margins between table rows is to give them a border the same color as the background  This is useful when styling a 3rd party theme where you can t change the html markup  Eg   tr       border  5px solid white

User · Answer

The border-spacing property will work for this particular case   table     border-collapse separate     border-spacing  0 1em      Reference

User · Answer

You can t style the  lt tr gt s themselves  but you can give the  lt td gt s inside the  highlight   lt tr gt s a style  like this  tr highlight td  padding-top  10px  padding-bottom 10px

User · Answer

This isn t going to be exactly perfect though I was happy to discover that you can control the horizontal and vertical border-spacing separately   table    border-collapse  separate   border-spacing  0 8px

User · Answer

add a div to the cells that you would like to add some extra spacing    lt tr class  highlight  gt    lt td gt  lt div gt Value1 lt  div gt  lt  td gt    lt td gt  lt div gt Value2 lt  div gt  lt  td gt   lt  tr gt  tr highlight td div   margin-top  10px

User · Answer

I know this is kind of old  but I just got something along the same lines to work   Couldn t you do this   tr highlight       border-top  10px solid      border-bottom  10px solid      border-color  transparent      Hope this helps

[css] How to add a margin to a table row <tr>

Examples related to css