Làm cách nào để tăng khoảng cách giữa các cột trong bảng?

Question

Giả sử tôi muốn tạo một bảng một hàng với 50px ở giữa mỗi cột nhưng đệm 10px ở trên cùng và dưới cùng.

Tôi làm như thế nào trong HTML/CSS?

Answer 1

Không cần giả <td>. Thay vào đó, hãy sử dụng số border-spacing.Áp dụng nó như thế này:

HTML:

<table> 
    <tr> 
    <td>First Column</td> 
    <td>Second Column</td> 
    <td>Third Column</td> 
    </tr> 
</table> 

CSS:

table { 
    border-collapse: separate; 
    border-spacing: 50px 0; 
} 

td { 
    padding: 10px 0; 
} 

Xem nó in action

Answer 2

Thiết lập độ rộng của <td> s để 50px và sau đó thêm bạn <td> + khác giả <td>

Fiddle.

HTML:

<table> 
    <tr> 
     <td>First Column</td> 
     <td></td> 
     <td>Second Column</td> 
     <td></td> 
     <td>Third Column</td> 
    </tr> 
</table> 

CSS

table tr td:empty { 
    width: 50px; 
} 

table tr td { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

Mã Giải thích:

Các kiểm tra quy tắc CSS đầu tiên cho trống td và cung cấp cho họ có chiều rộng 50px thì quy tắc thứ hai cung cấp cho các đệm của trên và dưới cho tất cả các td của.

Answer 3

Hãy thử

padding : 10px 10px 10px 10px; 

Answer 4

Bạn chỉ có thể sử dụng đệm. như vậy.

http://jsfiddle.net/davidja/KG8Kv/

HTML

<table> 
     <tr> 
      <td>item1</td> 
      <td>item2</td> 
      <td>item2</td> 
     </tr> 
    </table> 

CSS

td {padding:10px 25px 10px 25px;} 

HOẶC

tr td:first-child {padding-left:0px;} 
td {padding:10px 0px 10px 50px;} 

Answer 5

Nếu tôi hiểu chính xác, bạn muốn điều này fiddle.

HTML:

<table> 
<tr> 
    <td>Hello HTML!</td> 
    <td>Hello CSS!</td> 
    <td>Hello JS!</td> 
</tr> 

CSS:

table { 
    background: gray; 
} 
td {  
    display: block; 
    float: left; 
    padding: 10px 0; 
    margin-right:50px; 
    background: white; 
} 
td:last-child { 
    margin-right: 0; 
} 

Answer 6

Nếu bạn cần phải cung cấp một khoảng cách giữa hai hàng sử dụng thẻ này

margin-top: 10px !important; 

Answer 7

Giải pháp tốt hơn câu trả lời được chọn sẽ là sử dụng kích thước đường viền chứ không phải khoảng cách đường viền. Vấn đề chính khi sử dụng khoảng cách đường viền là ngay cả cột đầu tiên cũng có khoảng cách ở mặt trước.

Ví dụ,

table { 
 
    border-collapse: separate; 
 
    border-spacing: 80px 0; 
 
} 
 

 
td { 
 
    padding: 10px 0; 
 
}

<table> 
 
    <tr> 
 
    <td>First Column</td> 
 
    <td>Second Column</td> 
 
    <td>Third Column</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table>

Để tránh sử dụng này: border-left: 100px solid #FFF; và thiết lập border:0px cho cột đầu tiên.

Ví dụ,

td,th{ 
 
    border-left: 100px solid #FFF; 
 
} 
 

 
tr>td:first-child { 
 
    border:0px; 
 
}

<table id="t"> 
 
    <tr> 
 
    <td>Column1</td> 
 
    <td>Column2</td> 
 
    <td>Column3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1000</td> 
 
    <td>2000</td> 
 
    <td>3000</td> 
 
    </tr> 
 
</table>