60

Let's say I wanted to create a single-rowed table with 50 pixels in between each column, but 10 pixels padding on top and the bottom.

How would I do this in HTML/CSS?

Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
idude
  • 3,956
  • 6
  • 27
  • 41
  • 1
    You can not use margin between columns. You should specify a `width` or make use of `padding`. – Alvaro Jul 04 '13 at 11:56

7 Answers7

106

There isn't any need for fake <td>s. Make use of border-spacing instead. Apply it like this:

HTML:

<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
</table>

CSS:

table {
  border-collapse: separate;
  border-spacing: 50px 0;
}

td {
  padding: 10px 0;
}

See it in action.

Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
daniels
  • 4,298
  • 2
  • 19
  • 11
  • 4
    The downside here is if you're striping rows or coloring them on hover: browsers won't extend the background color across the border space. – Mike Post Jul 15 '15 at 18:59
  • 6
    This is not the best answer: It leaves a space in the left of first column: [Refer this](http://stackoverflow.com/a/37572153/2142994) – Ani Menon Jun 01 '16 at 14:57
13

Set the width of the <td>s to 50px and then add your <td> + another fake <td>

Fiddle.

table tr td:empty {
  width: 50px;
}
  
table tr td {
  padding-top: 10px;
  padding-bottom: 10px;
}
<table>
  <tr>
    <td>First Column</td>
    <td></td>
    <td>Second Column</td>
    <td></td>
    <td>Third Column</td>
  </tr>
</table>

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.

Maximilian Burszley
  • 15,132
  • 3
  • 27
  • 49
Mohammad Areeb Siddiqui
  • 9,083
  • 10
  • 62
  • 108
10

If I understand correctly, you want this fiddle.

table {
  background: gray;
}
td {    
  display: block;
  float: left;
  padding: 10px 0;
  margin-right:50px;
  background: white;
}
td:last-child {
  margin-right: 0;
}
<table>
  <tr>
    <td>Hello HTML!</td>
    <td>Hello CSS!</td>
    <td>Hello JS!</td>
  </tr>
</table>
Maximilian Burszley
  • 15,132
  • 3
  • 27
  • 49
Igor
  • 166
  • 5
8

You can just use padding. Like so:

http://jsfiddle.net/davidja/KG8Kv/

HTML

   <table>
        <tr>
            <td>item1</td>
            <td>item2</td>
            <td>item2</td>
        </tr>
    </table>

CSS

 td {padding:10px 25px 10px 25px;}

OR

 tr td:first-child {padding-left:0px;}
 td {padding:10px 0px 10px 50px;}
Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
David Allen
  • 1,075
  • 1
  • 10
  • 20
6

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,

table {
  border-collapse: separate;
  border-spacing: 80px 0;
}

td {
  padding: 10px 0;
}
<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

To avoid this use: border-left: 100px solid #FFF; and set border:0px for the first column.

For example,

td,th{
  border-left: 100px solid #FFF;
}

 tr>td:first-child {
   border:0px;
 }
<table id="t">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
    <td>Column3</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>2000</td>
    <td>3000</td>
  </tr>
</table>
Ani Menon
  • 23,084
  • 13
  • 81
  • 107
  • This makes a big white block. Wouldn't it be more sensible to use `padding-left` or `margin-left` instead? – Timmmm Jan 09 '19 at 09:42
4

Try

padding : 10px 10px 10px 10px;
Chetan Gawai
  • 2,133
  • 18
  • 34
-2

If you need to give a distance between two rows use this tag

margin-top: 10px !important;
Kevin Panko
  • 7,844
  • 19
  • 46
  • 58
santosh
  • 5
  • 1
  • 6