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?
This question is related to
html
css
html-table
padding
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.
Set the width of the <td>s to 50px and then add your <td> + another fake <td>
table tr td:empty {_x000D_
width: 50px;_x000D_
}_x000D_
_x000D_
table tr td {_x000D_
padding-top: 10px;_x000D_
padding-bottom: 10px;_x000D_
}<table>_x000D_
<tr>_x000D_
<td>First Column</td>_x000D_
<td></td>_x000D_
<td>Second Column</td>_x000D_
<td></td>_x000D_
<td>Third Column</td>_x000D_
</tr>_x000D_
</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.
If you need to give a distance between two rows use this tag
margin-top: 10px !important;
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;}
If I understand correctly, you want this fiddle.
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_
}<table>_x000D_
<tr>_x000D_
<td>Hello HTML!</td>_x000D_
<td>Hello CSS!</td>_x000D_
<td>Hello JS!</td>_x000D_
</tr>_x000D_
</table>Try
padding : 10px 10px 10px 10px;
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 {_x000D_
border-collapse: separate;_x000D_
border-spacing: 80px 0;_x000D_
}_x000D_
_x000D_
td {_x000D_
padding: 10px 0;_x000D_
}<table>_x000D_
<tr>_x000D_
<td>First Column</td>_x000D_
<td>Second Column</td>_x000D_
<td>Third Column</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
<td>3</td>_x000D_
</tr>_x000D_
</table>To avoid this use: border-left: 100px solid #FFF; and set border:0px for the first column.
For example,
td,th{_x000D_
border-left: 100px solid #FFF;_x000D_
}_x000D_
_x000D_
tr>td:first-child {_x000D_
border:0px;_x000D_
}<table id="t">_x000D_
<tr>_x000D_
<td>Column1</td>_x000D_
<td>Column2</td>_x000D_
<td>Column3</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1000</td>_x000D_
<td>2000</td>_x000D_
<td>3000</td>_x000D_
</tr>_x000D_
</table>Source: Stackoverflow.com