Space between two rows in a table

Question

Is this possible via CSS    I m trying   tr classname     border-spacing  5em      to no avail  Maybe I m doing something wrong

User · Answer

Take a look at the border-collapse  separate attribute  default  and the border-spacing property   First  you have to seperate them with border-collapse  then you can define the space between columns and rows with border-spacing    Both of these CSS properties are actually well-supported on every browser  see here    x000D   x000D  table      border-collapse  separate   border-spacing  10px 20px   x000D   x000D  table   x000D  table td  x000D  table th   border  1px solid black   x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt Some text - 1 lt  td gt  x000D       lt td gt Some text - 1 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Some text - 2 lt  td gt  x000D       lt td gt Some text - 2 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Some text - 3 lt  td gt  x000D       lt td gt Some text - 3 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

In the parent table  try setting   border-collapse separate   border-spacing 5em    Plus a border declaration  and see if this achieves your desired effect  Beware  though  that IE doesn t support the  separated borders  model

User · Answer

A too late answer     If you apply float to tr elements  you can space between two rows with margin attribute   table tr  float  left width  100      tr classname   margin-bottom 5px

User · Answer

From Mozilla Developer Network      The border-spacing CSS property specifies the distance between the borders of adjacent cells  only for the separated borders model   This is equivalent to the cellspacing attribute in presentational HTML  but an optional second value can be used to set different horizontal and vertical spacing    That last part is often overseen  Example     your-table       border-collapse  separate     allow spacing between cell borders        border-spacing  0 5px     NOTE  syntax is  lt horizontal value gt   lt vertical value gt       UPDATE  I now understand that the OP wants specific  seperate rows to have increased spacing  I ve added a setup with tbody elements that accomplishes that without ruining the semantics  However  I m not sure if it is supported on all browsers  I made it in Chrome   The example below is for showing how you can make it look like the table exists of seperate rows  full blown css sweetness  Also gave the first row more spacing with the tbody setup  Feel free to use   Support notice  IE8   Chrome  Firefox  Safari  Opera 4    x000D   x000D   spacing-table   x000D    font-family   Helvetica    Arial   sans-serif  x000D    font-size  15px  x000D    border-collapse  separate  x000D    table-layout  fixed  x000D    width  80   x000D    border-spacing  0 5px     this is the ultimate fix    x000D    x000D   spacing-table th   x000D    text-align  left  x000D    padding  5px 15px  x000D    x000D   spacing-table td   x000D    border-width  3px 0  x000D    width  50   x000D    border-color  darkred  x000D    border-style  solid  x000D    background-color  red  x000D    color  white  x000D    padding  5px 15px  x000D    x000D   spacing-table td first-child   x000D    border-left-width  3px  x000D    border-radius  5px 0 0 5px  x000D    x000D   spacing-table td last-child   x000D    border-right-width  3px  x000D    border-radius  0 5px 5px 0  x000D    x000D   spacing-table thead   x000D    display  table  x000D    table-layout  fixed  x000D    width  100   x000D    x000D   spacing-table tbody   x000D    display  table  x000D    table-layout  fixed  x000D    width  100   x000D    border-spacing  0 10px  x000D    x000D   lt table class  spacing-table  gt  x000D     lt thead gt  x000D       lt tr gt  x000D           lt th gt Lead singer lt  th gt  x000D           lt th gt Band lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D           lt td gt Bono lt  td gt  x000D           lt td gt U2 lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D     lt tbody gt  x000D       lt tr gt  x000D           lt td gt Chris Martin lt  td gt  x000D           lt td gt Coldplay lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt Mick Jagger lt  td gt  x000D           lt td gt Rolling Stones lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt John Lennon lt  td gt  x000D           lt td gt The Beatles lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Simply put div inside the td and set the following styles of div   margin-bottom  20px  height  40px  float  left  width  100

User · Answer

doing this shown above     table tr  float  left width  100      tr classname   margin-bottom 5px       removes vertical column alignment so be careful how you use it

User · Answer

You need to use padding on your td elements  Something like this should do the trick  You can  of course  get the same result using a top padding instead of a bottom padding   In the CSS code below  the greater-than sign means that the padding is only applied to td elements that are direct children to tr elements with the class spaceUnder  This will make it possible to use nested tables   Cell C and D in the example code   I m not too sure about browser support for the direct child selector  think IE 6   but it shouldn t break the code in any modern browsers    x000D   x000D     Apply padding to td elements that are direct children of the tr elements with class spaceUnder     x000D   x000D  tr spaceUnder gt td   x000D    padding-bottom  1em  x000D    x000D   lt table gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt A lt  td gt  x000D         lt td gt B lt  td gt  x000D       lt  tr gt  x000D       lt tr class  spaceUnder  gt  x000D         lt td gt C lt  td gt  x000D         lt td gt D lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt E lt  td gt  x000D         lt td gt F lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    This should render somewhat like this    --- ---    A   B    --- ---    C   D              --- ---    E   F    --- ---

User · Answer

You can fill the  lt td  gt  elements with  lt div  gt  elements  and apply any margin to those divs that you like   For a visual space between the rows  you can use a repeating background image on the  lt tr  gt  element    This was the solution I just used today  and it appears to work in both IE6 and FireFox 3  though I didn t test it any further    Also  if you re averse to modifying your server code to put  lt div  gt s inside the  lt td  gt s  you can use jQuery  or something similar  to dynamically wrap the  lt td  gt  contents in a  lt div  gt   enabling you to apply the CSS as desired

User · Answer

Have you tried   tr classname   margin-bottom 5em      Alternatively  each td can be adjusted as well   td classname   margin-bottom 5em      or   td classname   padding-bottom 5em

User · Answer

I stumbled upon this while struggling with a similar issue  I ve found Varun Natraaj s answer to be quite helpful  but I would use a transparent border instead   td   border  1em solid transparent      Transparent borders still have width

User · Answer

You can fill the  lt td  gt  elements with  lt div  gt  elements  and apply any margin to those divs that you like   For a visual space between the rows  you can use a repeating background image on the  lt tr  gt  element    This was the solution I just used today  and it appears to work in both IE6 and FireFox 3  though I didn t test it any further    Also  if you re averse to modifying your server code to put  lt div  gt s inside the  lt td  gt s  you can use jQuery  or something similar  to dynamically wrap the  lt td  gt  contents in a  lt div  gt   enabling you to apply the CSS as desired

User · Answer

Works for most latest browsers in 2015  Simple solution  It doesn t work for transparent  but unlike Thoronwen s answer  I can t get transparent to render with any size       tr         border-bottom 5em solid white

User · Answer

You need to set border-collapse  separate  on the table  most browser default stylesheets start at border-collapse  collapse   which ditches border spacing   Also  border-spacing  goes on the TD  not the TR     Try    lt html gt  lt head gt  lt style type  text css  gt       ex      border-collapse  separate         ex td   border-spacing  1em     lt  style gt  lt  head gt  lt body gt       lt table id  ex  gt  lt tr gt  lt td gt A lt  td gt  lt td gt B lt  td gt  lt  tr gt  lt tr gt  lt td gt C lt  td gt  lt td gt D lt  td gt  lt  tr gt  lt  table gt   lt  body gt

User · Answer

In the parent table  try setting   border-collapse separate   border-spacing 5em    Plus a border declaration  and see if this achieves your desired effect  Beware  though  that IE doesn t support the  separated borders  model

User · Answer

For creating an illusion of spacing between rows  apply background color to row and then create a thick border with white color so that a  space  is created     tr       background-color   FFD700     border  10px solid white

User · Answer

In the parent table  try setting   border-collapse separate   border-spacing 5em    Plus a border declaration  and see if this achieves your desired effect  Beware  though  that IE doesn t support the  separated borders  model

User · Answer

You have table with id albums with any data    I have omitted the trs and tds   lt table id  albums  cellspacing  0  gt          lt  table gt    In the css   table albums        border-collapse separate      border-spacing 0 5px

User · Answer

Have you tried   tr classname   margin-bottom 5em      Alternatively  each td can be adjusted as well   td classname   margin-bottom 5em      or   td classname   padding-bottom 5em

User · Answer

tr        display  block      margin-bottom  5px

User · Answer

From Mozilla Developer Network      The border-spacing CSS property specifies the distance between the borders of adjacent cells  only for the separated borders model   This is equivalent to the cellspacing attribute in presentational HTML  but an optional second value can be used to set different horizontal and vertical spacing    That last part is often overseen  Example     your-table       border-collapse  separate     allow spacing between cell borders        border-spacing  0 5px     NOTE  syntax is  lt horizontal value gt   lt vertical value gt       UPDATE  I now understand that the OP wants specific  seperate rows to have increased spacing  I ve added a setup with tbody elements that accomplishes that without ruining the semantics  However  I m not sure if it is supported on all browsers  I made it in Chrome   The example below is for showing how you can make it look like the table exists of seperate rows  full blown css sweetness  Also gave the first row more spacing with the tbody setup  Feel free to use   Support notice  IE8   Chrome  Firefox  Safari  Opera 4    x000D   x000D   spacing-table   x000D    font-family   Helvetica    Arial   sans-serif  x000D    font-size  15px  x000D    border-collapse  separate  x000D    table-layout  fixed  x000D    width  80   x000D    border-spacing  0 5px     this is the ultimate fix    x000D    x000D   spacing-table th   x000D    text-align  left  x000D    padding  5px 15px  x000D    x000D   spacing-table td   x000D    border-width  3px 0  x000D    width  50   x000D    border-color  darkred  x000D    border-style  solid  x000D    background-color  red  x000D    color  white  x000D    padding  5px 15px  x000D    x000D   spacing-table td first-child   x000D    border-left-width  3px  x000D    border-radius  5px 0 0 5px  x000D    x000D   spacing-table td last-child   x000D    border-right-width  3px  x000D    border-radius  0 5px 5px 0  x000D    x000D   spacing-table thead   x000D    display  table  x000D    table-layout  fixed  x000D    width  100   x000D    x000D   spacing-table tbody   x000D    display  table  x000D    table-layout  fixed  x000D    width  100   x000D    border-spacing  0 10px  x000D    x000D   lt table class  spacing-table  gt  x000D     lt thead gt  x000D       lt tr gt  x000D           lt th gt Lead singer lt  th gt  x000D           lt th gt Band lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D           lt td gt Bono lt  td gt  x000D           lt td gt U2 lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D     lt tbody gt  x000D       lt tr gt  x000D           lt td gt Chris Martin lt  td gt  x000D           lt td gt Coldplay lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt Mick Jagger lt  td gt  x000D           lt td gt Rolling Stones lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt John Lennon lt  td gt  x000D           lt td gt The Beatles lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

You need to use padding on your td elements  Something like this should do the trick  You can  of course  get the same result using a top padding instead of a bottom padding   In the CSS code below  the greater-than sign means that the padding is only applied to td elements that are direct children to tr elements with the class spaceUnder  This will make it possible to use nested tables   Cell C and D in the example code   I m not too sure about browser support for the direct child selector  think IE 6   but it shouldn t break the code in any modern browsers    x000D   x000D     Apply padding to td elements that are direct children of the tr elements with class spaceUnder     x000D   x000D  tr spaceUnder gt td   x000D    padding-bottom  1em  x000D    x000D   lt table gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt A lt  td gt  x000D         lt td gt B lt  td gt  x000D       lt  tr gt  x000D       lt tr class  spaceUnder  gt  x000D         lt td gt C lt  td gt  x000D         lt td gt D lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt E lt  td gt  x000D         lt td gt F lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    This should render somewhat like this    --- ---    A   B    --- ---    C   D              --- ---    E   F    --- ---

User · Answer

Here this works smoothly    myOwnTable td   padding  6px 0 6px 0     I suppose you could work out a more finely-grained layout by specifying which td if need be

User · Answer

I realize this is an answer to an old thread and may not be the solution requested  but while all the suggested solutions did not do what I needed  this solution worked for me   I had 2 table cells  one with background color  the other with a border color  The above solutions remove the border  so the cell on the right would appear to be floating in mid-air  The solution that did the trick was to replace the table  tr and td with divs and corresponding classes  table would be div id  table replacer   tr would be div class  tr replacer  and td would be div class  td replacer   change closing tags to divs as well obviously   To get the solution for my problem the css is    table replacer display table    tr replacer  border  1px solid  123456 margin-bottom  5px    DO NOT USE display table-row  It will destroy the border and the margin    td replacer display table-cell     Hope this helps someone

User · Answer

Here s a simple and elegant solution  with a few caveats    You can t actually make the gaps transparent  you need to give them a specific color  You can t round the corners of the borders above  amp  below the gaps You need to know the padding and borders of your table cells   With that in mind  try this   td  padding 5px 8px border 2px solid blue background  E0E0E0      lets say the cells all have this padding and border  and the gaps should be white     tr gapbefore td  overflow visible  tr gapbefore td  before  tr gapbefore th  before     content       display block    position relative    z-index 1    width auto    height 0    padding 0    margin -5px -10px 5px      5px   cell top padding  10px    cell side padding   cell side border width   table side border width       border-top 16px solid white      the size  amp  color of the gap you want      border-bottom 2px solid blue     this replaces the cell s top border  so should be the same as that  DOUBLE IT if using border-collapse separate        What you re actually doing is sticking a rectangular   before block into the top of all the cells in the row you want preceded by a gap   These blocks stick out of the cells a bit to overlap the existing borders  hiding them   These blocks are just a top and bottom border sandwiched together   The top border forms the gap  and the bottom border re-creates the appearance of the cells  original top border   Note that if you have a border around the table itself as well as the cells  you ll need to further increase the horizontal -ve margin of of your  blocks    So for a 4px table border  you d instead use   margin -5px -12px 5px         14px   original 10px   2px for  uncollapsed  part of table border      And if your table uses border-collapse separate instead of border-collapse collapse  then you ll need to  a  use the full table border width   margin -5px -14px 5px         14px   original 10px   4px full width of table border          and also  b  replace the double-width of border that now needs to appear below the gap   border-bottom 4px solid blue         i e  4px   cell top border   previous row s bottom border      The technique is easily adapted to a  gapafter version  if you prefer  or to creating vertical  column  gaps instead of row gaps   Here s a codepen where you can see it in action   https   codepen io anon pen agqPpW

User · Answer

Or just add a blank  with the height of the margin in between the rows you would like to add the spacing

User · Answer

I stumbled upon this while struggling with a similar issue  I ve found Varun Natraaj s answer to be quite helpful  but I would use a transparent border instead   td   border  1em solid transparent      Transparent borders still have width

User · Answer

since I have a background image behind the table  faking it with white padding wouldn t work  I opted to put an empty row in-between each row of content    lt tr class  spacer  gt  lt td gt  lt  td gt  lt  tr gt    then use css to give the spacer rows a certain height and transparent background

User · Answer

Best way is to add tr between two tr like below   x000D   x000D   lt tr gt    lt td height  5  colspan  2  gt  lt  td gt   lt  tr gt  x000D   x000D   x000D

User · Answer

Ok  you can do  tr classname td  background-color red  border-bottom  5em solid white    Make sure the background color is set on the td rather than the row  This should work across most browsers     Chrome  ie  amp  ff tested

User · Answer

I realize this is an answer to an old thread and may not be the solution requested  but while all the suggested solutions did not do what I needed  this solution worked for me   I had 2 table cells  one with background color  the other with a border color  The above solutions remove the border  so the cell on the right would appear to be floating in mid-air  The solution that did the trick was to replace the table  tr and td with divs and corresponding classes  table would be div id  table replacer   tr would be div class  tr replacer  and td would be div class  td replacer   change closing tags to divs as well obviously   To get the solution for my problem the css is    table replacer display table    tr replacer  border  1px solid  123456 margin-bottom  5px    DO NOT USE display table-row  It will destroy the border and the margin    td replacer display table-cell     Hope this helps someone

User · Answer

Works for most latest browsers in 2015  Simple solution  It doesn t work for transparent  but unlike Thoronwen s answer  I can t get transparent to render with any size       tr         border-bottom 5em solid white

User · Answer

Simply put div inside the td and set the following styles of div   margin-bottom  20px  height  40px  float  left  width  100

User · Answer

Here s a simple and elegant solution  with a few caveats    You can t actually make the gaps transparent  you need to give them a specific color  You can t round the corners of the borders above  amp  below the gaps You need to know the padding and borders of your table cells   With that in mind  try this   td  padding 5px 8px border 2px solid blue background  E0E0E0      lets say the cells all have this padding and border  and the gaps should be white     tr gapbefore td  overflow visible  tr gapbefore td  before  tr gapbefore th  before     content       display block    position relative    z-index 1    width auto    height 0    padding 0    margin -5px -10px 5px      5px   cell top padding  10px    cell side padding   cell side border width   table side border width       border-top 16px solid white      the size  amp  color of the gap you want      border-bottom 2px solid blue     this replaces the cell s top border  so should be the same as that  DOUBLE IT if using border-collapse separate        What you re actually doing is sticking a rectangular   before block into the top of all the cells in the row you want preceded by a gap   These blocks stick out of the cells a bit to overlap the existing borders  hiding them   These blocks are just a top and bottom border sandwiched together   The top border forms the gap  and the bottom border re-creates the appearance of the cells  original top border   Note that if you have a border around the table itself as well as the cells  you ll need to further increase the horizontal -ve margin of of your  blocks    So for a 4px table border  you d instead use   margin -5px -12px 5px         14px   original 10px   2px for  uncollapsed  part of table border      And if your table uses border-collapse separate instead of border-collapse collapse  then you ll need to  a  use the full table border width   margin -5px -14px 5px         14px   original 10px   4px full width of table border          and also  b  replace the double-width of border that now needs to appear below the gap   border-bottom 4px solid blue         i e  4px   cell top border   previous row s bottom border      The technique is easily adapted to a  gapafter version  if you prefer  or to creating vertical  column  gaps instead of row gaps   Here s a codepen where you can see it in action   https   codepen io anon pen agqPpW

User · Answer

Or just add a blank  with the height of the margin in between the rows you would like to add the spacing

User · Answer

since I have a background image behind the table  faking it with white padding wouldn t work  I opted to put an empty row in-between each row of content    lt tr class  spacer  gt  lt td gt  lt  td gt  lt  tr gt    then use css to give the spacer rows a certain height and transparent background

User · Answer

A too late answer     If you apply float to tr elements  you can space between two rows with margin attribute   table tr  float  left width  100      tr classname   margin-bottom 5px

User · Answer

The correct way to give spacing for tables is to use cellpadding and cellspacing e g    lt table cellpadding  4  gt

User · Answer

You need to set border-collapse  separate  on the table  most browser default stylesheets start at border-collapse  collapse   which ditches border spacing   Also  border-spacing  goes on the TD  not the TR     Try    lt html gt  lt head gt  lt style type  text css  gt       ex      border-collapse  separate         ex td   border-spacing  1em     lt  style gt  lt  head gt  lt body gt       lt table id  ex  gt  lt tr gt  lt td gt A lt  td gt  lt td gt B lt  td gt  lt  tr gt  lt tr gt  lt td gt C lt  td gt  lt td gt D lt  td gt  lt  tr gt  lt  table gt   lt  body gt

User · Answer

doing this shown above     table tr  float  left width  100      tr classname   margin-bottom 5px       removes vertical column alignment so be careful how you use it

User · Answer

Take a look at the border-collapse  separate attribute  default  and the border-spacing property   First  you have to seperate them with border-collapse  then you can define the space between columns and rows with border-spacing    Both of these CSS properties are actually well-supported on every browser  see here    x000D   x000D  table      border-collapse  separate   border-spacing  10px 20px   x000D   x000D  table   x000D  table td  x000D  table th   border  1px solid black   x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt Some text - 1 lt  td gt  x000D       lt td gt Some text - 1 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Some text - 2 lt  td gt  x000D       lt td gt Some text - 2 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Some text - 3 lt  td gt  x000D       lt td gt Some text - 3 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

You have table with id albums with any data    I have omitted the trs and tds   lt table id  albums  cellspacing  0  gt          lt  table gt    In the css   table albums        border-collapse separate      border-spacing 0 5px

User · Answer

Have you tried   tr classname   margin-bottom 5em      Alternatively  each td can be adjusted as well   td classname   margin-bottom 5em      or   td classname   padding-bottom 5em

User · Answer

You can use line-height in the table    lt table style  width  400px  line-height 50px   gt

User · Answer

You need to use padding on your td elements  Something like this should do the trick  You can  of course  get the same result using a top padding instead of a bottom padding   In the CSS code below  the greater-than sign means that the padding is only applied to td elements that are direct children to tr elements with the class spaceUnder  This will make it possible to use nested tables   Cell C and D in the example code   I m not too sure about browser support for the direct child selector  think IE 6   but it shouldn t break the code in any modern browsers    x000D   x000D     Apply padding to td elements that are direct children of the tr elements with class spaceUnder     x000D   x000D  tr spaceUnder gt td   x000D    padding-bottom  1em  x000D    x000D   lt table gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt A lt  td gt  x000D         lt td gt B lt  td gt  x000D       lt  tr gt  x000D       lt tr class  spaceUnder  gt  x000D         lt td gt C lt  td gt  x000D         lt td gt D lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt E lt  td gt  x000D         lt td gt F lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    This should render somewhat like this    --- ---    A   B    --- ---    C   D              --- ---    E   F    --- ---

User · Answer

For creating an illusion of spacing between rows  apply background color to row and then create a thick border with white color so that a  space  is created     tr       background-color   FFD700     border  10px solid white

User · Answer

Ok  you can do  tr classname td  background-color red  border-bottom  5em solid white    Make sure the background color is set on the td rather than the row  This should work across most browsers     Chrome  ie  amp  ff tested

User · Answer

Here this works smoothly    myOwnTable td   padding  6px 0 6px 0     I suppose you could work out a more finely-grained layout by specifying which td if need be

User · Answer

You can fill the  lt td  gt  elements with  lt div  gt  elements  and apply any margin to those divs that you like   For a visual space between the rows  you can use a repeating background image on the  lt tr  gt  element    This was the solution I just used today  and it appears to work in both IE6 and FireFox 3  though I didn t test it any further    Also  if you re averse to modifying your server code to put  lt div  gt s inside the  lt td  gt s  you can use jQuery  or something similar  to dynamically wrap the  lt td  gt  contents in a  lt div  gt   enabling you to apply the CSS as desired

User · Answer

Best way is to add tr between two tr like below   x000D   x000D   lt tr gt    lt td height  5  colspan  2  gt  lt  td gt   lt  tr gt  x000D   x000D   x000D

User · Answer

You need to use padding on your td elements  Something like this should do the trick  You can  of course  get the same result using a top padding instead of a bottom padding   In the CSS code below  the greater-than sign means that the padding is only applied to td elements that are direct children to tr elements with the class spaceUnder  This will make it possible to use nested tables   Cell C and D in the example code   I m not too sure about browser support for the direct child selector  think IE 6   but it shouldn t break the code in any modern browsers    x000D   x000D     Apply padding to td elements that are direct children of the tr elements with class spaceUnder     x000D   x000D  tr spaceUnder gt td   x000D    padding-bottom  1em  x000D    x000D   lt table gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt A lt  td gt  x000D         lt td gt B lt  td gt  x000D       lt  tr gt  x000D       lt tr class  spaceUnder  gt  x000D         lt td gt C lt  td gt  x000D         lt td gt D lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt E lt  td gt  x000D         lt td gt F lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    This should render somewhat like this    --- ---    A   B    --- ---    C   D              --- ---    E   F    --- ---

User · Answer

You may try to add separator row   html    lt tr class  separator    gt    css   table tr separator   height  10px

User · Answer

The correct way to give spacing for tables is to use cellpadding and cellspacing e g    lt table cellpadding  4  gt

User · Answer

In the parent table  try setting   border-collapse separate   border-spacing 5em    Plus a border declaration  and see if this achieves your desired effect  Beware  though  that IE doesn t support the  separated borders  model

User · Answer

You can fill the  lt td  gt  elements with  lt div  gt  elements  and apply any margin to those divs that you like   For a visual space between the rows  you can use a repeating background image on the  lt tr  gt  element    This was the solution I just used today  and it appears to work in both IE6 and FireFox 3  though I didn t test it any further    Also  if you re averse to modifying your server code to put  lt div  gt s inside the  lt td  gt s  you can use jQuery  or something similar  to dynamically wrap the  lt td  gt  contents in a  lt div  gt   enabling you to apply the CSS as desired

User · Answer

You can t change the margin of a table cell  But you CAN change the padding  Change the padding of the TD  which will make the cell larger and push the text away from the side with the increased padding  If you have border lines  however  it still won t be exactly what you want

User · Answer

You can t change the margin of a table cell  But you CAN change the padding  Change the padding of the TD  which will make the cell larger and push the text away from the side with the increased padding  If you have border lines  however  it still won t be exactly what you want

User · Answer

tr        display  block      margin-bottom  5px

User · Answer

You can t change the margin of a table cell  But you CAN change the padding  Change the padding of the TD  which will make the cell larger and push the text away from the side with the increased padding  If you have border lines  however  it still won t be exactly what you want

User · Answer

You can use line-height in the table    lt table style  width  400px  line-height 50px   gt

User · Answer

You may try to add separator row   html    lt tr class  separator    gt    css   table tr separator   height  10px

User · Answer

Have you tried   tr classname   margin-bottom 5em      Alternatively  each td can be adjusted as well   td classname   margin-bottom 5em      or   td classname   padding-bottom 5em

User · Answer

You can t change the margin of a table cell  But you CAN change the padding  Change the padding of the TD  which will make the cell larger and push the text away from the side with the increased padding  If you have border lines  however  it still won t be exactly what you want

[html] Space between two rows in a table?

Examples related to html

Examples related to css