Bảng HTML: giữ cùng chiều rộng cho các cột

Question

Tôi có một bảng với một số nhóm cột. Bảng lớn hơn trang của tôi, vì vậy tôi có quyền kiểm soát để hiển thị/ẩn một số nhóm này để vừa với trang. Bảng ban đầu có vẻ tốt: tất cả các cột có cùng chiều rộng trong một nhóm. Nhưng khi tôi ẩn một nhóm, các cột không cùng chiều rộng nữa, và nó trông xấu.

Ví dụ: http://www.reviews-web-hosting.com/companies/apollohosting.html (chia link)

Cho đến nay, bảng có vẻ tốt đẹp. Nhấp vào >>. Cột đầu tiên trong "Thương mại điện tử Pro" rộng hơn nhiều so với các cột khác trong "Thương mại điện tử Pro", có vẻ lạ. Nhấp vào < <, lần này cột đầu tiên trong "Giá trị" quá rộng. Ít nhất là trên Firefox.

Tôi đã cố gắng sử dụng

<colgroup><col /><col span="5" />... 

nhưng không có may mắn. Nếu tôi đặt col thành style = "display: none", tập hợp các cột vẫn được hiển thị.

Mẹo HTML/CSS nào để giữ cho các cột có cùng chiều rộng với một nhóm?

Edit:

• ẩn cột, tôi phải sử dụng visibility: sự sụp đổ
• nó dường như được thay đổi kích thước cũng bây giờ, tôi không biết tại sao

Answer 1

Nếu bạn đặt kiểu trên bàn, bạn có thể ghi đè kích thước cột tự động của trình duyệt. Sau đó trình duyệt sẽ thiết lập độ rộng cột dựa trên chiều rộng của các ô trong hàng đầu tiên của bảng. Thay đổi <thead> thành <caption> và xóa <td> bên trong của nó, sau đó đặt chiều rộng cố định cho các ô trong <tbody>.

Answer 2

Trong của bạn trường hợp, vì bạn chỉ hiển thị 3 cột:

Name Value  Business 
    or 
Name Business Ecommerce Pro 

tại sao không đặt tất cả 3 để có chiều rộng 33,3%. vì chỉ có 3 được hiển thị cùng lúc, trình duyệt nên hiển thị tất cả chúng với chiều rộng tương tự.

Answer 3

tốt, tại sao bạn không (loại bỏ thanh bên và) bóp bàn để nó không có hiệu ứng hiển thị/ẩn? Nó trông kỳ lạ với tôi bây giờ. Bảng quá mạnh.
Nếu không, tôi nghĩ rằng đề nghị của scunliffe nên làm điều đó. Hoặc nếu bạn muốn, bạn chỉ có thể thiết lập chiều rộng chính xác của bảng và đặt chiều rộng phần trăm hoặc pixel cho các ô bảng.

Answer 4

cung cấp kiểu này cho td: chiều rộng: 1%;