Tại sao colspan không được áp dụng như mong đợi

Question

Tôi có một bảng theo bên dưới. Hàng thứ hai đã xác định ba cột, một cột có colspan=8 và các cột khác có colspan=1. Tuy nhiên, các tế bào không được kéo dài theo colspan, "chiều rộng" là nhiều hơn một chút cho tế bào thứ hai và rộng nhất cho thứ ba.

<table class="floating simpletable"> 
    <tbody> 
     <tr><td colspan="10">1st row</td></tr> 
     <tr><td colspan="8">Column 1 -&gt; Least wide</td><td colspan="1">2nd</td><td colspan="1">3rd</td></tr> 
     <tr><td colspan="10">3rd row</td></tr> 
     <tr><td colspan="1">1st cell</td><td colspan="9">4th row</td></tr> 
    </tbody> 
</table> 

Sự cố và cách khắc phục sự cố?

Answer 1

Độ rộng của ô phụ thuộc vào nội dung ô, cài đặt HTML và CSS cho chiều rộng, trình duyệt và có thể là giai đoạn của mặt trăng. Thuộc tính colspan chỉ định số cột (do đó, số lượng vị trí trong lưới cho bảng) mà một ô chiếm giữ.

Nếu bạn thấy ô cuối cùng của hàng 2 là rộng nhất, thì lý do có thể là hầu hết nội dung (hoặc có cài đặt chiều rộng cho nó). Mã trình diễn của bạn không thể hiện hành vi như vậy.

Nếu bạn không muốn độ rộng cột điều chỉnh theo yêu cầu kích thước của ô, hãy đặt độ rộng một cách rõ ràng bằng CSS (hoặc trong HTML). Trước đó, tốt nhất là loại bỏ tất cả các biến chứng không cần thiết khỏi cấu trúc bảng. Nếu mã demo của bạn phản ánh toàn bộ cấu trúc, thì các cột từ 2 đến 8 là một bộ phận không cần thiết, tức là chúng có thể được chuyển sang một cột đơn. Cuộc biểu tình (với độ rộng điểm ảnh kém phong cách chỉ cho tính xác định):

<table class="floating simpletable" border> 
    <col width=100><col width=100><col width=100> 
    <tbody> 
     <tr><td colspan="4">1st row</td></tr> 
     <tr><td colspan="2">span 1</td><td>span 2</td><td>span 3 </td></tr> 
     <tr><td colspan="4">3rd row</td></tr> 
     <tr><td>span</td><td colspan="3">other span</td></tr> 
    </tbody> 
</table> 

Nếu không có một viết lại như thế này, tôi e rằng bảng của bạn vi phạm các mô hình bảng HTML, như hiện nay không có tế bào bắt đầu trong cột 3 hoặc cột 4 hoặc ...

Answer 2

colspan xác định số lượng ô trùng lặp, không phải kích thước của các cột đó. Sử dụng thuộc tính CSS width để chỉ định chiều rộng của sự vật.