2010-09-07 35 views
23

Tôi muốn các kiểu khác nhau trên mỗi cột của bảng. Tôi đã đọc rằng bạn có thể làm điều đó bằng cách sử dụng <colgroup> hoặc <col>, nhưng tôi không có may mắn. Tôi có một ví dụ here và dường như không có gì thay đổi. Tôi có làm điều gì sai? Điều này sẽ làm việc trên xhtml?Phần tử bảng colgroup HTML không hoạt động?

Tôi biết tôi có thể thêm thuộc tính "lớp" trên mỗi <td>, nhưng điều đó có vẻ yếu.

Trả lời

32

Chính xác. Mặc dù colgroup chính nó được hỗ trợ bởi tất cả các trình duyệt, this isn't true for the attributes of the inner col element. Trong số các thuộc tính có thể, chỉ có width được hỗ trợ trên tất cả các trình duyệt. Nhưng không giống CSS, chỉ <col width=""> pixel và độ rộng phần trăm được hỗ trợ.

Không sử dụng. Thay vào đó, hãy tạo các lớp CSS và gán chúng cho mỗi td. Vâng, nó hút.

EDIT Cập nhật liên kết ở trên để trang có thông tin tốt hơn

+0

Thxs! có vẻ như html5 sẽ làm cho nhóm colgroup hoạt động .. nhưng cho đến lúc đó, tôi sẽ sử dụng các lớp hoặc nth-child – pleasedontbelong

+3

Trang bạn tham chiếu nói _The thẻ được hỗ trợ trong tất cả các trình duyệt chính_ Có thể bạn nên xóa tham chiếu, vì chúng làm sai người. –

+0

Tôi đồng ý với @JannieT, điều này dường như được hỗ trợ bởi tất cả các trình duyệt chính. Xem: http://reference.sitepoint.com/html/colgroup và http://webdesign.about.com/od/htmltags/p/bltags_colgroup.htm –

5

Đặt bạn table-layout để tự động thay vì cố định ...

table {table-layout: auto;} 

trang web cá nhân của tôi hỗ trợ nhiều chủ đề và tôi thấy các loại khác nhau mọi lúc.

+1

Tài sản tuyệt vời! :) https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout –

1

Bạn có thể sử dụng bộ chọn css để nhận các kết quả tương tự mà không cần thêm các lớp bổ sung.

Ví dụ nếu bạn muốn từ bỏ phong cách đặc trưng cho một cột thứ hai bạn có thể sử dụng:

table>tbody>td:nth-child(2){font-weight: bolder;} 
Các vấn đề liên quan