CODEWITHSUNDEEP
htmlcsshtml-table
Shalin
Shalin

Reputation: 1481

Add space between two particular <td>s

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?

Upvotes: 11

Views: 153383

Answers (7)

abhi
abhi

Reputation: 1

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

it will adjust auto space between all td

Upvotes: 0

saran3h
saran3h

Reputation: 14022

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.

Upvotes: 1

Lakshman Kambam
Lakshman Kambam

Reputation: 1618

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>

Upvotes: 6

nik
nik

Reputation: 31

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.

Upvotes: 3

Hubro
Hubro

Reputation: 59313

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.

Upvotes: 22

xiaoyi
xiaoyi

Reputation: 6741

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

Upvotes: 11

Mr. Alien
Mr. Alien

Reputation: 157284

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

Upvotes: 1

Related Questions