In my HTML document, I have a table with two columns and multiple rows. How can I increase the space in between the first and second column with css? I've tried applying "margin-right: 10px;" to each of the cells on the left hand side, but to no effect.
16 Answers
Apply this to your first <td>:
padding-right:10px;
HTML example:
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>
I realize this is quite belated, but for the record, you can also use CSS selectors to do this (eliminating the need for inline styles.) This CSS applies padding to the first column of every row:
table > tr > td:first-child { padding-right:10px }
And this would be your HTML, sans CSS!:
<table><tr><td>data</td><td>more data</td></tr></table>
This allows for much more elegant markup, especially in cases where you need to do lots of specific formatting with CSS.
Try padding-right. You're not allowed to put margin's between cells.
<table>
<tr>
<td style="padding-right: 10px;">one</td>
<td>two</td>
</tr>
</table>
You can't single out individual columns in a cell in that manner. In my opinion, your best option is to add a style='padding-left:10px' on the second column and apply the styles on an internal div or element. This way you can achieve the illusion of a greater space.
Related