bố cục bảng: vấn đề cố định với chiều rộng cột

Question

Chúng tôi đang sử dụng thuộc tính CSS table-layout: fixed cho ứng dụng dành cho thiết bị di động của chúng tôi. (Tôi không nhớ lý do đầy đủ, nhưng tôi tin rằng nó phải làm với việc cho phép gói từ một số loại) ...

Tôi đã gặp phải vấn đề mà chúng tôi cần phải định kích thước một trong hai cột bảng hai cột. Không phải là vấn đề lớn, thường chúng tôi làm điều này:

<table> 
    <tbody>   
    <tr> 
     <th width="20%">hello world</th> 
     <td>hello world</td> 
    </tr> 
    </tbody> 
</table> 

Điều đó có hiệu quả.

Tuy nhiên, nếu chúng ta cần phải tạo ra một hàng kéo dài cả hai cột TRƯỚC này:

<table> 
    <tbody> 
    <tr> 
     <td colspan="2">hello world</th> 
    </tr>  
    <tr> 
     <th width="20%">hello world</th> 
     <td>hello world</td> 
    </tr> 
    </tbody> 
</table> 

gì xảy ra, ít nhất là trong Chrome, đó là hai cột chụp tới 50% độ rộng. Tôi có mẫu jsbin tại đây:

http://jsbin.com/ejovut/3

Đây có phải là hành vi bình thường không? Lỗi Chrome? Một cách để giải quyết vấn đề này?

Answer 1

Đây không phải là lỗi. table-layout:fixed có nghĩa là trình duyệt được phép tối ưu hóa tính toán bố cục bảng bằng cách giả định chỉ có thông số kỹ thuật hàng và cột đầu tiên. Cụ thể, nó NOT cần kiểm tra và thực hiện tính toán bố cục trên nội dung bảng sau này, có thể tạo sự khác biệt lớn về hiệu suất bố cục.

Giải pháp đúng là sử dụng các phần tử <col> và <colgroup> để chỉ định rõ độ rộng cột, thay vì sử dụng hàng đầu tiên.

Answer 2

hàng đầu tiên của bảng phải chứa tất cả cũng vậy, lỗi Chrome không cho phép sử dụng cho việc này.