Padding a table row

Question

lt html gt       lt head gt           lt title gt Table Row Padding Issue lt  title gt           lt style type  text css  gt              tr                   padding  20px                         lt  style gt       lt  head gt       lt body gt           lt table gt               lt tbody gt                   lt tr gt                       lt td gt                           lt h2 gt Lorem Ipsum lt  h2 gt                           lt p gt Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis  Curabitur sodales risus sit amet                         neque fringilla feugiat  Ut tellus nulla  bibendum at faucibus ut  convallis eget neque  In hac habitasse                          platea dictumst  Nullam elit enim  gravida eu blandit ut  pellentesque nec turpis  Proin faucibus  sem sed                          tempor auctor  ipsum velit pellentesque lorem  ut semper lorem eros ac eros  Vivamus mi urna  tempus vitae                          mattis eget  pretium sit amet sapien  Curabitur viverra lacus non tortor luctus vitae euismod purus                          hendrerit  Praesent ut venenatis eros  Nulla a ligula erat  Mauris lobortis tempus nulla non                          scelerisque  lt  p gt                       lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  body gt   lt  html gt    Here s what the padding looks like  See how the td inside isn t affected  What s the solution

User · Answer

You could simply add this style to the table   table       border-spacing  15px

User · Answer

give the td padding

User · Answer

In CSS 1 and CSS 2 specifications  padding was available for all elements including  lt tr gt   Yet support of padding for table-row   lt tr gt   has been removed in CSS 2 1 and CSS 3 specifications  I have never found the reason behind this annoying change which also affect margin property and a few other table elements  header  footer  and columns    Update  in Feb 2015  this thread on the www-style w3c org mailing list discussed about adding support of padding and border for table-row  This would apply the standard box model also to table-row and table-column elements  It would permit such examples  The thread seems to suggest that table-row padding support never existed in CSS standards because it would have complicated layout engines  In the 30 September 2014 Editor s Draft of CSS basic box model  padding and border properties exist for all elements including table-row and table-column elements  If it eventually becomes a W3C recommendation  your html css example may work as intended in browsers at last

User · Answer

This is a very old post  but I thought I should post my solution of a similar problem I faced recently    Answer   I solved this issue by displaying the tr element as a block element i e  specifying a CSS of display block for the tr element  You can see this in code sample below    x000D   x000D   lt style gt  x000D    tr   x000D      display  block  x000D      padding-bottom  20px  x000D      x000D    table   x000D      border  1px solid red  x000D      x000D   lt  style gt  x000D   lt table gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt  x000D           lt h2 gt Lorem Ipsum lt  h2 gt  x000D           lt p gt Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis  Curabitur sodales risus sit amet neque fringilla feugiat  Ut tellus nulla  bibendum at faucibus ut  convallis eget neque  In hac habitasse platea dictumst  Nullam elit enim  gravida x000D            eu blandit ut  pellentesque nec turpis  Proin faucibus  sem sed tempor auctor  ipsum velit pellentesque lorem  ut semper lorem eros ac eros  Vivamus mi urna  tempus vitae mattis eget  pretium sit amet sapien  Curabitur viverra lacus non tortor x000D            luctus vitae euismod purus hendrerit  Praesent ut venenatis eros  Nulla a ligula erat  Mauris lobortis tempus nulla non scelerisque  x000D           lt  p gt  x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   lt br gt  x000D   lt br gt This TEXT IS BELOW and OUTSIDE the TABLE element  NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element  The key point here is that the tr element must be displayed as a block x000D  in order for padding to apply at the tr level  x000D   x000D   x000D

User · Answer

The trick is to give padding on the td elements  but make an exception for the first  yes  it s hacky  but sometimes you have to play by the browser s rules    td     padding-top 20px    padding-bottom 20px    padding-right 20px        td first-child     padding-left 20px    padding-right 0      First-child is relatively well supported  https   developer mozilla org en-US docs CSS  first-child  You can use the same reasoning for the horizontal padding by using tr first-child td   Alternatively  exclude the first column by using the not operator   Support for this is not as good right now  though     td not  first-child      padding-top 20px    padding-bottom 20px    padding-right 20px

User · Answer

Option 1  You could also solve it by adding a transparent border to the row  tr   like this  HTML   lt table gt       lt tr gt             lt td gt 1 lt  td gt       lt  tr gt       lt tr gt             lt td gt 2 lt  td gt       lt  tr gt   lt  table gt    CSS  tr       border-top  12px solid transparent      border-bottom  12px solid transparent      Works like a charm  although if you need regular borders  then this method will sadly not work   Option 2  Since rows act as a way to group cells  the correct way to do this  would be to use  table       border-collapse  inherit      border-spacing  0 10px

[html] Padding a table row

Examples related to html

Examples related to css

Examples related to html-table

Examples related to row

Examples related to padding