Thêm khoảng trống giữa hai đặc biệt <td> s

Question

Tôi có một bảng

<tr> 
    <td>One</td> 
    <td>Two</td> 
    <td>Three</td> 
    <td>Four</td> 
</tr> 

Làm thế nào tôi có thể thêm một số không gian giữa <td> s 'Hai' và 'Ba' một mình?

Answer 1

Cách đơn giản nhất:

td:nth-child(2) { 
    padding-right: 20px; 
}​ 

Nhưng điều đó sẽ không hoạt động nếu bạn cần để làm việc với màu nền hoặc hình ảnh trong bảng. Trong trường hợp đó, đây là một giải pháp nhẹ tiên tiến hơn (CSS3):

td:nth-child(2) { 
    border-right: 10px solid transparent; 
    -webkit-background-clip: padding; 
    -moz-background-clip: padding; 
    background-clip: padding-box; 
} 

Nó đặt một biên giới trong suốt đối với quyền của các tế bào và kéo màu nền/hình ảnh ra khỏi biên giới, tạo ra ảo giác về khoảng cách giữa các ô.

Lưu ý: Để làm việc này, bảng cha phải có border-collapse: separate. Nếu bạn phải làm việc với border-collapse: collapse thì bạn phải áp dụng cùng một kiểu đường viền cho ô bảng tiếp theo, nhưng ở phía bên trái, để thực hiện cùng một kết quả.

Answer 2

Hãy thử điều này 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; 
} 

Answer 3

câu trả lời đơn giản: cho hai tds những cánh đồng phong cách.

<tr> 
<td>One</td> 
<td style="padding-right: 10px">Two</td> 
<td>Three</td> 
<td>Four</td> 
</tr> 

Tidy một: sử dụng tên lớp

<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 một: sử dụng bộ chọn thứ n con trong CSS và xác định giá trị đệm đặc biệt cho hai, hoạt động trong các trình duyệt hiện đại.

tr td:nth-child(2) { 
    padding-right: 10px; 
}​ 

Answer 4

bạn phải đặt cellpadding và cellspacing là nó.

<table cellpadding="5" cellspacing="5"> 
<tr> 
<td>One</td> 
<td>Two</td> 
<td>Three</td> 
<td>Four</td> 
</tr> 
</table> 

Answer 5

lựa chọn của tôi là để thêm một td giữa hai td thẻ và thiết lập các width-25px. Nó có thể là nhiều hơn hoặc ít hơn theo ý thích của bạn. Điều này có thể được cheesy nhưng nó là đơn giản và nó hoạt động.