Làm cách nào để làm cho một cột trong bảng điền vào tất cả khoảng trống ngang phụ tùng?

Question

Tôi có một bảng HTML gồm 3 cột. Nó có chiều rộng cố định là 600px.

<table> 
    <tr> 
    <td>Name</td> 
    <td>Qty</td> 
    <td>Actions</td> 
    </tr> 
</table> 

Tôi muốn các Số lượng và hành động cột là càng nhỏ càng tốt (giữ nội dung vào một dòng) và tên cột để mất phần còn lại của không gian có sẵn. Kích thước của cột Số lượng và Hành động thay đổi tùy thuộc vào kích thước nội dung/phông chữ nên độ rộng cố định sẽ không hoạt động trong trường hợp này.

Có cách nào để thực hiện điều này trong HTML/CSS không? Hoặc là cái gì tôi cần phải phá vỡ Javascript cho?

Answer 1

Bạn có thể áp dụng chiều rộng = "99%" trên cột đó. Ví dụ:

<table> 
    <tr> 
    <td width="99%">Name</td> 
    <td>Qty</td> 
    <td>Actions</td> 
    </tr> 
</table> 

Answer 2

bạn có thể sử dụng chiều rộng tối đa: 99%; trên cột đầu tiên và cung cấp kích thước cố định trên các cột khác (tôi đã sử dụng các cột có kích thước pixel).

<table style="width: 100%;"> 
    <tr> 
    <td style="max-width: 99%"> 
     Will max 
    </td> 
    <td style='width:110px;'> 
     fixed size here 
    </td> 
    </tr> 
</table>