Thực hành chiều rộng cột Bảng HTML

Question

Thực tiễn tốt khi chọn độ rộng cột trong bảng là gì? Giả sử tôi có bốn cột, tên (độ rộng biến đổi), mô tả (nội dung dài của văn bản), đếm (tối đa 3 ký tự), ngày (định dạng cố định).

Điều gì sẽ là phương pháp hay? Tôi đang nghĩ chiều rộng cố định cho descr., Đếm và chiều rộng (do đó thực sự cũng làm cho tên "cố định" chiều rộng). Nhưng câu hỏi thực sự của tôi là, cách chọn kích thước chiều rộng cụ thể. Ví dụ: nếu định dạng ngày là yyyy-MM-dd thì có một số mẹo để chuyển đổi 10 ký tự đó thành chiều rộng để đảm bảo rằng nó hiển thị ổn định trong bất kỳ trình duyệt nào sử dụng phông chữ và kích thước phông chữ (mà không mất quá nhiều không gian)?

chỉnh sửa: Với cố định tôi là một cái gì đó giống như "số tiền cố định điểm ảnh tương ứng với phông chữ rộng"

Answer 1

Bạn có thể tuyên bố white-space: nowrap; trên tất cả các ô mà bạn muốn kéo dài nhiều như họ cần mà không cần sử dụng thêm không gian (tên, ngày, số đếm), và sau đó chỉ cần cho ô còn lại của bạn có chiều rộng là 100%. Bằng cách này, ô rộng 100% sẽ mở rộng càng nhiều càng tốt, mà không làm cho các ô khác sụp đổ trên nhiều dòng.

Answer 2

Nếu bạn muốn tiết kiệm cho mình rất nhiều đánh dấu ...

Thứ nhất, nếu bằng chiều rộng cố định bạn có nghĩa là một tỷ lệ cố định, thêm dòng sau vào stylesheet của bạn:

.width1 { 
    width: 1%; 
} 
.width2 { 
    width: 2%; 
} 
.width99 { 
    width: 99%; 
} 
.width100 { 
    width: 100%; 
} 

này mang đến cho bạn tính linh hoạt bạn cần nếu bạn quyết định áp dụng chiều rộng phần trăm lẻ cho bất kỳ phần nào trong số chúng nếu bạn muốn - ví dụ width23 trên một trong số chúng, chiều rộng 27 trên một khác.

Đây là bit thông minh. Sử dụng thẻ col, bạn có thể áp dụng chiều rộng chỉ một lần thay vì trên mỗi ô. Tôi biết bạn có thể áp dụng chiều rộng cho hàng đầu tiên và họ sẽ đặt độ rộng cho cùng một ô trong mỗi hàng khác - nhưng thẻ col cũng có thể được sử dụng để đặt các thuộc tính khác. Ví dụ:

<table class="width100"> 
    <col class="width15" style="background-color: #cccccc;" /> 
    <col class="width65" /> 
    <col class="width10" /> 
    <col class="width10" /> 
    <tr> 
     <td>My Sample Name</td> 
     <td>My Sample Long Description</td> 
     <td>5</td> 
     <td>2010-Oct-08</td> 
    </tr> 
</table> 

Tôi thường thích sử dụng kỹ thuật này - nhưng nếu nó là một bố cục tôi sẽ được sử dụng trên nhiều bảng (ví dụ bảng khách hàng có thể bố trí tương tự như các bảng đại lý) sau đó tôi sẽ tạo một lớp cho mỗi cột và thiết lập chiều rộng vv trong lớp đó. Sau đó tôi sẽ áp dụng lớp có liên quan cho mỗi ô. Tôi cho rằng cả hai phương pháp có thể được kết hợp - lớp liên quan có thể được áp dụng cho col tương ứng, nhưng thực tế là các thuộc tính được đặt ở một nơi (bảng định kiểu) có nghĩa là bạn chỉ phải thay đổi nó ở một nơi.

Hy vọng điều này sẽ giúp và đó là những gì bạn đang tìm kiếm.

Richard