Làm cách nào để áp dụng đệm vào cột bằng cách sử dụng <col> và CSS trong Firefox?

Ví dụ:Làm cách nào để áp dụng đệm vào cột bằng cách sử dụng <col> và CSS trong Firefox?

<style type="text/css"> 
    table { 
     border: 1px solid red; 
     border-collapse: collapse; 
     text-align: left; 
    } 
    #col-1 { 
     padding-left: 20px; 
     background-color: tan; 
    } 
    #specific-cell { 
     padding-left: 20px; 
    } 
</style> 
<table> 
    <col id="col-1"> 
    <col id="col-2"> 
    <tr> 
     <th>foo</th> 
     <th>bar</th> 
    </tr> 
    <tr> 
     <td>data1</th> 
     <td>data2</th> 
    </tr> 
    <tr> 
     <td id="specific-cell">data1</th> 
     <td>data2</th> 
    </tr> 
    <tr> 
     <td>data1</th> 
     <td>data2</th> 
    </tr> 
</table>

Màu được áp dụng cho cột chứ không phải đệm. Nếu tôi sử dụng các lớp/id trên các ô trực tiếp, nó hoạt động.

Tôi có bị buộc phải sử dụng chúng không, hoặc có cách nào lợi dụng thẻ <col> không?

Nguồn

2009-05-15 mark

Nó không được phép hoạt động, tại ít nhất với CSS 2.1. Bạn có thể xem CSS 2.1 table columns specification.

Bạn có thể phá vỡ này bằng cách sử dụng :first-child và +:

/* first column */ 
td:first-child { 
    padding-left: 20px; 
} 

/* second column */ 
td:first-child + td { 
    padding-left: 10px; 
} 

/* third columns */ { 
td:first-child + td + td { 
    padding-left: 0; 
}

Nguồn

2009-05-15 11:55:51 amain

Câu trả lời rất sâu sắc, cảm ơn! – mark

này làm việc cho tôi trong IE với DOCTYPE sau

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

và phong cách

#col-1 { 
    padding-left: 50px; 
    background-color: tan; 
} 
#col-2 { 
    padding-left: 100px; 
    background-color: lightgreen; 
}

DOCTYPE bạn đang sử dụng ... và những gì trình duyệt bạn đang sử dụng ...

gì

hmm ... vừa được kiểm tra dường như không hoạt động trong Firefox

Nguồn

2009-05-15 10:58:43

Làm thế nào vô dụng mà không cần thông tin trình duyệt, tôi lấy làm tiếc. Vâng, đó là FF, tôi đã thêm nó vào câu hỏi. – mark

câu trả lời của Alex làm việc cho tôi, ngoại trừ nó không phải là rất khả năng mở rộng cho nhiều cột và nhanh chóng trở nên khó đọc. Tôi đã sử dụng :nth-of-type(n) thay vào đó, tuy nhiên bộ chọn này đã được giới thiệu trong CSS3.

Selector: :nth-of-type(n)
Ví dụ: p:nth-of-type(2)
Kết quả: Chọn mỗi <p> yếu tố đó là <p> Yếu tố thứ hai của mẹ

Ví dụ:

/*column 1*/ 
#myTable td:nth-of-type(1) 
{ 
    padding-left: 20px; 
    background-color: tan; 
} 
/*column 2*/ 
#myTable td:nth-of-type(2) 
{ 
    padding-left: 10px; 
}

Nguồn

2013-11-12 20:17:26 johntrepreneur

Làm cách nào để áp dụng đệm vào cột bằng cách sử dụng <col> và CSS trong Firefox?

Trả lời

Các vấn đề liên quan