Add space between two particular td s

Question

I have a table   lt tr gt      lt td gt One lt  td gt      lt td gt Two lt  td gt      lt td gt Three lt  td gt      lt td gt Four lt  td gt   lt  tr gt    How can I add some space between the  lt td gt s  Two  and  Three  alone

User · Answer

Simple answer  give these two tds a style field    lt tr gt   lt td gt One lt  td gt   lt td style  padding-right  10px  gt Two lt  td gt   lt td gt Three lt  td gt   lt td gt Four lt  td gt   lt  tr gt    Tidy one  use class name   lt tr gt   lt td gt One lt  td gt   lt td class  more-padding-on-right  gt Two lt  td gt   lt td gt Three lt  td gt   lt td gt Four lt  td gt   lt  tr gt    more-padding-on-right     padding-right  10px      Complex one  using nth-child selector in CSS and specify special padding values for these two  which works in modern browsers   tr td nth-child 2      padding-right  10px

User · Answer

td nth-of-type n    padding-right  10px    it will adjust auto space between all td

User · Answer

my choice was to add a td between the two td tags and set the width to 25px  It can be more or less to your liking   This may be cheesy but it is simple and it works

User · Answer

Try this Demo  HTML   lt table gt       lt tr gt           lt td gt One lt  td gt           lt td gt Two lt  td gt           lt td gt Three lt  td gt           lt td gt Four lt  td gt       lt  tr gt   lt  table gt    CSS  td nth-of-type 2       padding-right  10px

User · Answer

you have to set cellpadding and cellspacing that s it    lt table cellpadding  5  cellspacing  5  gt   lt tr gt    lt td gt One lt  td gt    lt td gt Two lt  td gt    lt td gt Three lt  td gt    lt td gt Four lt  td gt    lt  tr gt   lt  table gt

User · Answer

The simplest way   td nth-child 2        padding-right  20px       But that won t work if you need to work with background color or images in your table  In that case  here is a slightly more advanced solution  CSS3    td nth-child 2        border-right  10px solid transparent      -webkit-background-clip  padding      -moz-background-clip  padding      background-clip  padding-box      It places a transparent border to the right of the cell and pulls the background color image away from the border  creating the illusion of spacing between the cells   Note  For this to work  the parent table must have border-collapse  separate  If you have to work with border-collapse  collapse then you have to apply the same border style to the next table cell  but on the left side  to accomplish the same results

User · Answer

None of the answers worked for me  The simplest way would be to add  lt td gt s in between with width   5px and background  white  or whatever the background color of the page is   Again this will fail in case you have a list of  lt th gt s representing table headers

[html] Add space between two particular <td>s

Examples related to html

Examples related to css

Examples related to html-table