Có cột đầu tiên trong bảng HTML linh hoạt khi độ rộng bảng = 100%

Question

Tôi có một bảng HTML với 8 cột và nhiều hàng. Nội dung của mỗi ô được tạo động và khó dự đoán chiều rộng của bất kỳ cột nào. Tôi đặt chiều rộng bảng = 100% vì tôi muốn bảng chiếm toàn bộ chiều rộng của div. Tôi muốn các cột từ 2 đến 8 giữ nguyên chiều rộng như thể tôi không đặt chiều rộng bảng. Sau đó, tôi muốn cột đầu tiên mở rộng chiều rộng của nó sao cho chiều rộng của bảng trở thành 100%. Điều này có thể không?

Answer 1

Đặt độ rộng rõ ràng cho 2 - 8 và ô 1 sẽ xác định chiều rộng của riêng nó với không gian còn lại. Bạn cũng có thể đặt no-wrap cho khoảng trắng trong ô đầu tiên để nội dung không được bọc, nhưng buộc ô phát triển khi cần thiết.

Answer 2

Tôi nghĩ câu hỏi của bạn chưa hoàn chỉnh, vì đọc theo nghĩa đen, câu trả lời là không đặt bất kỳ độ rộng cột nào cả. Mỗi cột sẽ chiếm nhiều không gian như ý muốn, và bằng cách nào đó chúng sẽ phân phối nó với nhau.

Bạn có thể làm rõ những gì bạn muốn đạt được không?

Answer 3

<div> 
<table width="100%"> 
<tr> 
<td width="100%"></td> <- this is col 1 
<td></td><td></td><td></td><td></td><td></td><td></td><td></td> <- cols 2-8 
</tr> 
</table> 
</div> 

bằng cách đặt ô đầu tiên thành 100%, nó sẽ buộc ô đó cố gắng càng rộng càng tốt, trong khi vẫn tôn trọng chiều rộng của phần còn lại của ô. Nếu ô 2-8 chứa văn bản, bạn có thể thêm để văn bản bên trong các ô đó không được gói do nỗ lực của ô đầu tiên là chiều rộng 100%.

Answer 4

Đặt chiều rộng trên bảng và trên tất cả các cột khác; cột còn lại sẽ mất tất cả các slack.

Bí quyết là sử dụng table-layout: fixed kiểu để thuật toán tự động bố cục tự động (và giải thích đặc biệt kém của IE) không tham gia và gây rối khi có lượng nội dung dự kiến ​​lớn hơn một cột.

Trong chế độ bố cục cố định, hàng đầu tiên của ô hoặc <col> yếu tố đặt chiều rộng; các hàng tiếp theo không ảnh hưởng đến độ rộng. Điều này làm cho việc hiển thị nhanh hơn; bạn nên sử dụng bố cục cố định cho mọi bảng bạn có thể.

<table> 
    <col class="name" /><col class="data" /><col class="data" /><col class="data" /> 
    <col class="data" /><col class="data" /><col class="data" /><col class="data" /> 
    <tr> 
     <td>tiddle om pom pom</td> 
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> 
    </tr> 
</table> 

table { width: 100%; table-layout: fixed; } 
col.data { width: 2em; }