CSS table layout why does table-row not accept a margin

Question

x000D   x000D   container   x000D    width  850px  x000D    padding  0  x000D    display  table  x000D    margin-left  auto  x000D    margin-right  auto  x000D    x000D   row   x000D    display  table-row  x000D    margin-bottom  30px  x000D       HERE    x000D    x000D   home 1   x000D    width  64px  x000D    height  64px  x000D    padding-right  20px  x000D    margin-right  10px  x000D    display  table-cell  x000D    x000D   home 2   x000D    width  350px  x000D    height  64px  x000D    padding  0px  x000D    vertical-align  middle  x000D    font-size  150   x000D    display  table-cell  x000D    x000D   home 3   x000D    width  64px  x000D    height  64px  x000D    padding-right  20px  x000D    margin-right  10px  x000D    display  table-cell  x000D    x000D   home 4   x000D    width  350px  x000D    height  64px  x000D    padding  0px  x000D    vertical-align  middle  x000D    font-size  150   x000D    display  table-cell  x000D    x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt div class  home 1  gt  lt  div gt  x000D       lt div class  home 2  gt  lt  div gt  x000D       lt div class  home 3  gt  lt  div gt  x000D       lt div class  home 4  gt  lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  row  gt  x000D       lt div class  home 1  gt  lt  div gt  x000D       lt div class  home 2  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    My question is relative to the line marked HERE in the CSS  I found out that the rows are too near to each other  so I tried to add a bottom margin to separate them  Unfortunately it does not work  I have to add the margins to the table cells to separate the rows   What is the reason behind this behavior   Also  is it ok to use this strategy to perform layouting as I am doing    icon  - text       icon  - text  icon  - text       icon  - text   or is there a better strategy

User · Answer

There is a pretty simple fix for this  the border-spacing and border-collapse CSS attributes work on display  table   You can use the following to get padding margins in your cells     x000D   x000D   container   x000D    width  850px  x000D    padding  0  x000D    display  table  x000D    margin-left  auto  x000D    margin-right  auto  x000D    border-collapse  separate  x000D    border-spacing  15px  x000D    x000D   x000D   row   x000D    display  table-row  x000D    x000D   x000D   home 1   x000D    width  64px  x000D    height  64px  x000D    padding-right  20px  x000D    margin-right  10px  x000D    display  table-cell  x000D    x000D   x000D   home 2   x000D    width  350px  x000D    height  64px  x000D    padding  0px  x000D    vertical-align  middle  x000D    font-size  150   x000D    display  table-cell  x000D    x000D   x000D   home 3   x000D    width  64px  x000D    height  64px  x000D    padding-right  20px  x000D    margin-right  10px  x000D    display  table-cell  x000D    x000D   x000D   home 4   x000D    width  350px  x000D    height  64px  x000D    padding  0px  x000D    vertical-align  middle  x000D    font-size  150   x000D    display  table-cell  x000D    x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt div class  home 1  gt Foo lt  div gt  x000D       lt div class  home 2  gt Foo lt  div gt  x000D       lt div class  home 3  gt Foo lt  div gt  x000D       lt div class  home 4  gt Foo lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  row  gt  x000D       lt div class  home 1  gt Foo lt  div gt  x000D       lt div class  home 2  gt Foo lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Note that you have to have   border-collapse  separate    Otherwise it will not work

User · Answer

Fiddle    row-seperator     border-top  solid transparent 50px       lt table gt      lt tr gt  lt td gt Section 1 lt  td gt  lt  tr gt      lt tr gt  lt td gt row1 1 lt  td gt  lt  tr gt      lt tr gt  lt td gt row1 2 lt  td gt  lt  tr gt      lt tr gt         lt td class  row-seperator  gt Section 2 lt  td gt      lt  tr gt      lt tr gt  lt td gt row2 1 lt  td gt  lt  tr gt      lt tr gt  lt td gt row2 2 lt  td gt  lt  tr gt   lt  table gt     Outline Section 1 row1 1 row1 2   Section 2 row2 1 row2 2   this can be another solution

User · Answer

Have you tried setting the bottom margin to  row div  i e  to your  cells    When you work with actual HTML tables  you cannot set margins to rows  too - only to cells

User · Answer

How s this for a work around  using an actual table    table       border-collapse  collapse     tr row       border-bottom  solid white 30px     change  white  to your background color        It s not as dynamic  since you have to explicitly set the color of the border  unless there s a way around that too   but this is something I m experimenting with on a project of my own   Edit to include comments regarding transparent   tr row       border-bottom  30px solid transparent

User · Answer

Add spacer span between two elements  then make it unvisible    lt img src       gt   lt span class  spacer  gt --- lt  span gt   lt span gt Text TEXT lt  span gt    spacer       visibility  hidden

User · Answer

If you want a specific margin e g  20px  you can put the table inside a div   lt div id  quot tableDiv quot  gt       lt table gt         lt tr gt           lt th gt  test heading  lt  th gt         lt  tr gt         lt tr gt           lt td gt  test data  lt  td gt         lt  tr gt       lt  table gt   lt  div gt   So the  tableDiv has a margin of 20px but the table itself has a width of 100   forcing the table to be the full width except for the margin on either sides   tableDiv     margin  20px     table     width  100

User · Answer

See the CSS 2 1 standard  section 17 5 3  When you use display table-row  the height of the DIV is solely determined by the height of the table-cell elements in it  Thus  margin  padding  and height on those elements have no effect   http   www w3 org TR CSS2 tables html

User · Answer

The closest thing I ve seen would be to set border-spacing  0 30px  to the container div  However  this just leaves me with space on the upper edge of the table  which defeats the purpose  since you wanted margin-bottom

User · Answer

adding a br tag between the divs worked  add br tag between two divs that are display table-row in a parent with display table

User · Answer

Works - Add Spacing To Table   options table     border-spacing  8px

[html] CSS table layout: why does table-row not accept a margin?

Examples related to html

Examples related to css