CSS how do I create a gap between rows in a table

Question

Meaning making the resultant table look less like this        ROW         ROW         ROW         ROW           and more like this        ROW          ROW          ROW          ROW       I tried adding   margin-bottom 1em    to both td and tr but got nothing  Any ideas

User · Answer

If none of the other answers are satisfactory  you could always just create an empty row and style it with CSS appropriately to be transparent

User · Answer

Simply you can use padding-top and padding-bottom on a td element   Unit can anything from this list     Demo Code    x000D   x000D  td x000D    x000D    padding-top  10px  x000D    padding-bottom  10px  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt th gt Firstname lt  th gt  x000D       lt th gt Lastname lt  th gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Peter lt  td gt  x000D       lt td gt Griffin lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Lois lt  td gt  x000D       lt td gt Griffin lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

If you stick with the design using tables the best idea will be to give an empty row with no content and specified height between each rows in the table   You can use div to avoid this complexity  Just give a margin to each div

User · Answer

Create an another  lt tr gt  just below and add some space or height to content of  lt td gt   Checkout the fiddle for example https   jsfiddle net jd dev777 wx63norf 9

User · Answer

If you don t have borders  or have borders and want the spacing inside the cells  you can use padding  or line-height  As far as I know  margin has no effect on cells and rows  A CSS property for spacing of cells is border-spacing  but it doesn t work on IE6 7  so you can use it depending on your crowd      If all else fails you can use the old cellspacing attribute in your markup - but this will also give you spacing between the columns  Some CSS reset suggest you should set it anyway to get cross-browser support         tables still need cellspacing  0  in the markup

User · Answer

All you need   table       border-collapse  separate      border-spacing  0 1em      That assumes you want a 1em vertical gap  and no horizontal gap   If you re doing this  you should probably also look at controlling your line-height   Sort of weird that some of the answers people gave involve border-collapse  collapse  whose effect is the exact opposite of what the question asked for

User · Answer

You could also just modify the height for each row using CSS     lt head gt    lt style gt   tr      height 40px      lt  style gt   lt  head gt    lt body gt   lt table gt    lt tr gt   lt td gt One lt  td gt   lt td gt Two lt  td gt   lt  tr gt   lt tr gt   lt td gt Three lt  td gt   lt td gt Four lt  td gt   lt  tr gt   lt tr gt   lt td gt Five lt  td gt   lt td gt Six lt  td gt   lt  tr gt    lt  table gt   lt  body gt    You could also modify the height of the  lt td gt  element  it should give you the same result

User · Answer

This is the way  I was thinking it s impossible    First give the table only vertical border-spacing  for example 5px  and set it s horizontal border-spacing to 0  Then you should give proper borders to each row cell  For example the right-most cell in each row should have border on top  bottom and right  The left-most cells should have border on top  bottom and left  And the other cells between these 2 should only have border on top and bottom  Like this example    lt table style  border-spacing 0 5px  color black  gt       lt tr gt           lt td style  border-bottom thin black solid  border-top thin black solid  border-left thin black solid   gt left-most cell lt  td gt           lt td style  border-bottom thin black solid  border-top thin black solid   gt other cell lt  td gt           lt td style  border-bottom thin black solid  border-top thin black solid   gt other cell lt  td gt           lt td style  border-bottom thin black solid  border-top thin black solid   gt other cell lt  td gt           lt td style  border-bottom thin black solid  border-top thin black solid  border-right thin black solid   gt right-most cell lt  td gt       lt  tr gt       lt tr gt           lt td style  border-bottom thin black solid  border-top thin black solid  border-left thin black solid   gt left-most cell lt  td gt           lt td style  border-bottom thin black solid  border-top thin black solid   gt other cell lt  td gt           lt td style  border-bottom thin black solid  border-top thin black solid   gt other cell lt  td gt           lt td style  border-bottom thin black solid  border-top thin black solid   gt other cell lt  td gt           lt td style  border-bottom thin black solid  border-top thin black solid  border-right thin black solid   gt right-most cell lt  td gt       lt  tr gt       lt tr gt           lt td style  border-bottom thin black solid  border-top thin black solid  border-left thin black solid   gt left-most cell lt  td gt           lt td style  border-bottom thin black solid  border-top thin black solid   gt other cell lt  td gt           lt td style  border-bottom thin black solid  border-top thin black solid   gt other cell lt  td gt           lt td style  border-bottom thin black solid  border-top thin black solid   gt other cell lt  td gt           lt td style  border-bottom thin black solid  border-top thin black solid  border-right thin black solid   gt right-most cell lt  td gt       lt  tr gt   lt  table gt

User · Answer

In my opinion  the easiest way to do is adding padding to your  tag   td    padding  10px 0     Hope this will help you  Cheer

User · Answer

Add following rule to tr and it should work  float  left   Sample  Open it in IE9 offcourse       http   jsfiddle net zshmN   EDIT  This isn t a legal or correct solution as pointed out by many  but if you are left with no option and need something this will work in IE9    So all those who are giving down votes  please let us know correct solution as well

User · Answer

table       border-collapse  collapse     td       padding-top   5em      padding-bottom   5em      The cells won t react to anything unless you set the border-collapse first   You can also add borders to TR elements once that s set  among other things    If this is for layout  I d move to using DIVs and more up-to-date layout techniques  but if this is tabular data  knock yourself out   I still make heavy use of tables in my web applications for data

User · Answer

the padding in the TD works if you want the space to have the same background color as the td   in my case  requirement was for white space between header row and whatever was above it  by applying this styling to a single cell  i was able to get the desired separation  It was not necessary to add it to all cells     Arguably not the MOST elegant  but possibly more elegant than separator rows    lt td colspan  10  gt        lt div class  HeaderRow            style  margin-top 10px   gt               lt    Eval  VendorName    gt        lt  div gt   lt  td gt

[html] CSS: how do I create a gap between rows in a table?

Examples related to html

Examples related to css