I have a table
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
How can I add some space between the <td>s 'Two' and 'Three' alone?
This question is related to
html
css
html-table
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.
you have to set cellpadding and cellspacing that's it.
<table cellpadding="5" cellspacing="5">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</table>
Try this Demo
HTML
<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</table>
CSS
td:nth-of-type(2) {
padding-right: 10px;
}
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.
Simple answer: give these two tds a style field.
<tr>
<td>One</td>
<td style="padding-right: 10px">Two</td>
<td>Three</td>
<td>Four</td>
</tr>
Tidy one: use class name
<tr>
<td>One</td>
<td class="more-padding-on-right">Two</td>
<td>Three</td>
<td>Four</td>
</tr>
.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;
}?
td:nth-of-type(n) { padding-right: 10px;}
it will adjust auto space between all td
None of the answers worked for me. The simplest way would be to add <td>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 <th>s representing table headers.
Source: Stackoverflow.com