How to increase the distance between table columns in HTML

Question

Let s say I wanted to create a single-rowed table with 50 nbsp pixels in between each column  but 10 nbsp pixels padding on top and the bottom   How would I do this in HTML CSS

User · Accepted Answer

There isn t any need for fake  lt td gt s  Make use of border-spacing instead  Apply it like this   HTML    lt table gt     lt tr gt       lt td gt First Column lt  td gt       lt td gt Second Column lt  td gt       lt td gt Third Column lt  td gt     lt  tr gt   lt  table gt    CSS   table     border-collapse  separate    border-spacing  50px 0     td     padding  10px 0      See it in action

User · Answer

If you need to give a distance between two rows use this tag  margin-top  10px  important

User · Answer

Try  padding   10px 10px 10px 10px

User · Answer

If I understand correctly  you want this fiddle    x000D   x000D  table   x000D    background  gray  x000D    x000D  td       x000D    display  block  x000D    float  left  x000D    padding  10px 0  x000D    margin-right 50px  x000D    background  white  x000D    x000D  td last-child   x000D    margin-right  0  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt Hello HTML  lt  td gt  x000D       lt td gt Hello CSS  lt  td gt  x000D       lt td gt Hello JS  lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

You can just use padding  Like so   http   jsfiddle net davidja KG8Kv   HTML      lt table gt           lt tr gt               lt td gt item1 lt  td gt               lt td gt item2 lt  td gt               lt td gt item2 lt  td gt           lt  tr gt       lt  table gt    CSS   td  padding 10px 25px 10px 25px     OR   tr td first-child  padding-left 0px    td  padding 10px 0px 10px 50px

User · Answer

Set the width of the  lt td gt s to 50px and then add your  lt td gt    another fake  lt td gt   Fiddle    x000D   x000D  table tr td empty   x000D    width  50px  x000D    x000D     x000D  table tr td   x000D    padding-top  10px  x000D    padding-bottom  10px  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt First Column lt  td gt  x000D       lt td gt  lt  td gt  x000D       lt td gt Second Column lt  td gt  x000D       lt td gt  lt  td gt  x000D       lt td gt Third Column lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Code Explained   The first CSS rule checks for empty td s and give them a width of 50px then the second rule give the padding of top and bottom to all the td s

User · Answer

A better solution than selected answer would be to use border-size rather than border-spacing  The main problem with using border-spacing is that even the first column would have a spacing in the front   For example    x000D   x000D  table   x000D    border-collapse  separate  x000D    border-spacing  80px 0  x000D    x000D   x000D  td   x000D    padding  10px 0  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt First Column lt  td gt  x000D       lt td gt Second Column lt  td gt  x000D       lt td gt Third Column lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt 1 lt  td gt  x000D       lt td gt 2 lt  td gt  x000D       lt td gt 3 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    To avoid this use  border-left  100px solid  FFF  and set border 0px for the first column   For example    x000D   x000D  td th  x000D    border-left  100px solid  FFF  x000D    x000D   x000D   tr gt td first-child   x000D     border 0px  x000D     x000D   lt table id  t  gt  x000D     lt tr gt  x000D       lt td gt Column1 lt  td gt  x000D       lt td gt Column2 lt  td gt  x000D       lt td gt Column3 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt 1000 lt  td gt  x000D       lt td gt 2000 lt  td gt  x000D       lt td gt 3000 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

[html] How to increase the distance between table columns in HTML?

Examples related to html

Examples related to css

Examples related to html-table

Examples related to padding