Làm thế nào để làm cho tế bào bảng co lại theo nội dung?

Question

Làm thế nào tôi có thể làm cho bảng với 2 cột (tế bào) trông như thế này:

• tế bào đầu tiên là co lại theo nội dung
• Các tế bào khác phù hợp với phần còn lại của bảng (rộng hơn cả nội dung cùng)

Ví dụ:

<table style="width: 500px;"> 
    <tr> 
     <td>foo</td> 
     <td>bar</td> 
    </tr> 
</table> 

tôi cần bảng để trông như thế này:

.___________________________________________________________________________. 
| foo | bar   <a lot of space here>        | 
|_____|_____________________________________________________________________| 
          500 px total width 

Lưu ý: Tôi không biết chiều rộng "foo" nên tôi không thể đặt "50px", "10%" hoặc một cái gì đó tương tự.

Answer 1

Bạn có thể đặt width của tế bào thứ hai để 100%

HTML:

<table> 
    <tr> 
     <td>foo</td> 
     <td class="grow">bar</td> 
    </tr> 
</table>​ 

CSS:

table { width: 500px; } 
.grow { width: 100%; }​ 

Kiểm tra this fiddle ra.

Answer 2

Nếu tổng kích thước của bảng là 500 pixel và sẽ không vượt qua, hãy đặt td{max-width: 500px;}; Nếu giá trị tối thiểu là 500 pixel, td {min-width: 500px;}; Nhìn này exemple.

Answer 3

thiết

td{ 
max-width:100%; 
white-space:nowrap; 
} 

nó sẽ giải quyết vấn đề ur ..

Answer 4

Tôi biết điều này đã được hỏi năm trước. OP có thể đã giải quyết nó ngay bây giờ. Nhưng điều này vẫn có thể hữu ích cho ai đó. Vì vậy, tôi đăng những gì làm việc cho tôi. Đây là những gì tôi đã làm với tôi. Tôi đặt chiều rộng thành bất kỳ thứ gì gần bằng không, để thu nhỏ nó, sau đó đặt khoảng trắng thành không gian. Giải quyết.

td { 
width:0.1%; 
white-space: nowrap; 
}