Làm cách nào để đặt chiều rộng tối đa của một ô trong bảng bằng cách sử dụng tỷ lệ phần trăm?

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

Ở trên không hoạt động. Làm cách nào để đặt chiều rộng tối đa của một ô trong bảng bằng cách sử dụng tỷ lệ phần trăm?

Theo định nghĩa về chiều rộng tối đa trong thông số kỹ thuật CSS 2.1, “tác động của 'chiều rộng tối thiểu' và 'chiều rộng tối đa' trên các bảng, bảng nội dòng, ô bảng, cột bảng và nhóm cột là không xác định." Vì vậy, bạn không thể đặt trực tiếp chiều rộng tối đa trên một phần tử td.

Nếu bạn chỉ muốn cột thứ hai chiếm nhiều nhất 67%, thì bạn có thể đặt chiều rộng (có hiệu lực là chiều rộng tối thiểu, đối với các ô trong bảng) thành 33%, ví dụ: trong trường hợp ví dụ

td:first-child { width: 33% ;}

Đặt điều đó cho cả hai cột sẽ không hoạt động tốt, vì nó có xu hướng khiến trình duyệt cung cấp cho các cột chiều rộng bằng nhau.

Câu hỏi cũ mà tôi biết, nhưng điều này bây giờ có thể sử dụng thuộc tính css table-layout: fixedtrên thẻ bảng. Câu trả lời bên dưới từ câu hỏi này Chiều rộng phần trăm CSS và tràn văn bản trong một ô bảng

Điều này có thể dễ dàng thực hiện bằng cách sử dụng table-layout: fixed, nhưng hơi phức tạp vì không nhiều người biết về thuộc tính CSS này.

table {
  width: 100%;
  table-layout: fixed;
}

Xem nó hoạt động tại fiddle cập nhật tại đây: http://jsfiddle.net/Fm5bM/4/

Tôi biết đây là nghĩa đen của một năm sau, nhưng tôi nghĩ rằng tôi sẽ chia sẻ. Tôi đã cố gắng làm điều tương tự và nhận ra giải pháp này phù hợp với tôi. Chúng tôi đặt chiều rộng tối đa cho toàn bộ bảng, sau đó làm việc với các kích thước ô để có hiệu ứng mong muốn.

Đặt bảng trong div của chính nó, sau đó đặt chiều rộng, chiều rộng tối thiểu và / hoặc chiều rộng tối đa của div như mong muốn cho toàn bộ bảng. Sau đó, bạn có thể làm việc và đặt chiều rộng và chiều rộng tối thiểu cho các ô khác và chiều rộng tối đa cho div làm việc hiệu quả xung quanh và ngược lại để đạt được chiều rộng tối đa mà chúng tôi muốn.

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

Sau đó, trong phong cách của bạn đặt:

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

Phải thừa nhận rằng điều này không cung cấp cho bạn chiều rộng "tối đa" của mỗi ô, nhưng nó cho phép một số điều khiển có thể hoạt động thay cho tùy chọn như vậy. Không chắc liệu nó có phù hợp với nhu cầu của bạn hay không. Tôi biết nó phù hợp với tình huống của chúng tôi khi chúng tôi muốn phần điều hướng trong trang tăng và giảm xuống một điểm nhưng đối với tất cả các màn hình rộng hiện nay.

phần trăm phải tương đối với kích thước tuyệt đối, hãy thử điều này:

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>