CSS để tạo cột trong bảng chiếm nhiều chỗ nhất có thể và các cột khác nhỏ hơn

Question

Tôi cần bố cục một html có thể đặt dữ liệu với CSS.

Nội dung thực tế của bảng có thể khác nhau, nhưng luôn có một cột chính và 2 hoặc nhiều cột khác. Tôi muốn làm cho cột chính mất càng nhiều chiều rộng càng tốt, bất kể nội dung của nó, trong khi các cột khác chiếm ít nhất chiều rộng nhất có thể. Tôi không thể chỉ định chiều rộng chính xác cho bất kỳ cột nào vì nội dung của chúng có thể thay đổi.

Làm cách nào tôi có thể thực hiện việc này bằng bảng html và css hợp lệ ngữ nghĩa đơn giản?

Ví dụ:

 
| Main column       | Col 2 | Column 3 | 
<------------------ fixed width in px -------------------> 
<------- as wide as possible ---------> 
Thin as possible depending on contents: <-----> <--------> 

Answer 1

Tôi xa là một chuyên gia về CSS nhưng công trình này cho tôi (trong IE, FF, Safari và Chrome):

td.zero_width { 
    width: 1%; 
} 

Sau đó, trong HTML của bạn :

<td class="zero_width">...</td> 

Answer 2

Tương tự như giải pháp của Alexk, nhưng có thể dễ thực hiện hơn tùy thuộc vào trường hợp của bạn:

<table> 
    <tr> 
     <td>foo</td> 
     <td class="importantColumn">bar</td> 
     <td>woo</td> 
     <td>pah</td> 
    </tr> 
</table> 

.importantColumn{ 
    width: 100%; 
} 

Bạn cũng có thể muốn áp dụng white-space:nowrap cho các ô nếu bạn muốn tránh gói.

Answer 3

Tôi đã không thành công với width: 100%; vì dường như không có div chứa có chiều rộng cố định, điều này sẽ không nhận được kết quả mong muốn. Thay vào đó tôi sử dụng một cái gì đó như sau và nó dường như cho tôi kết quả tốt nhất của tôi.

.column-fill { min-width: 325px; } 

Bằng cách này nó có thể nhận được lớn hơn nếu nó cần phải, và có vẻ như trình duyệt sẽ cung cấp cho tất cả các không gian thêm để bất cứ cột được thiết lập theo cách này. Không chắc chắn nếu nó hoạt động cho tất cả mọi người nhưng đã làm cho tôi trong chrome (đã không cố gắng những người khác) ... giá trị một shot.