11

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?

1
  • Set padding on CSS or add &#160 ( its space ) after text Two.
    – Syuaa SE
    Nov 10, 2012 at 7:00

7 Answers 7

22

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.

11

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;
}​
3
  • 1
    Technically, this does not add spacing between the td elements as requested, even though it spaces their contents apart. The difference between these concepts is relevant e.g. if the cells have background or border set. There is no way to really set spacing between two td elements without setting spacing between all cells. Nov 10, 2012 at 7:37
  • You are right. Since there is no way to give some extra space BETWEEN two particular tds, this is the only thing I can come up with.
    – xiaoyi
    Nov 10, 2012 at 7:40
  • @JukkaK.Korpela: Strictly speaking, true. But practically speaking my solution does address the issues you mention, take a look at my answer below.
    – Hubro
    Nov 10, 2012 at 8:16
6

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>
1
  • 4
    Not only does that not do what the question asked at all, those attributes should not be used anymore. Nov 11, 2012 at 3:34
3

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.

1
  • This is the simplest, easiest, most clear and precise answer here. I used this also! Well done.
    – NightTom
    May 26, 2021 at 13:11
1

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;
}
1

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.

1
  • It won't fail if you add the same amongst the <th>'s with the same widths. Thanks!
    – NightTom
    May 26, 2021 at 13:12
0

td:nth-of-type(n) { padding-right: 10px;}

it will adjust auto space between all td

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.