Cột bảng, thiết lập cả chiều rộng tối thiểu và tối đa với css

Question

Tôi muốn có một bảng mà trong các cột có thể kéo dài nhưng tôi đang gặp một chút rắc rối với chiều rộng tối thiểu và tối đa trong css.

Cũng dường như theres một số câu trả lời mâu thuẫn xung quanh cách làm việc này:

• min/chiều rộng tối đa nên làm việc: Prevent text from overlap table td width
• min/chiều rộng tối đa không được hỗ trợ: Min-width and max-height for table attributes

tôi sẽ muốn có một số điện thoại sau đây:

table{ 
    width:100%; 
} 
.a, .b, .c 
{ 
    background-color: red; 
} 
.a 
{ 
    min-width: 10px; 
    max-width: 20px; 
} 
.b 
{ 
    min-width: 40px; 
    max-width: 45px; 
} 
.c 
{ 
} 

<table> 
    <tr> 
     <td class="a">A</td> 
     <td class="b">B</td> 
     <td class="c">C</td> 
    </tr> 
</table> 

Có cách nào để đạt được điều này mà không cần javascript (tức là hạn chế kéo dài cột với một bảng)?

• tôi chỉ cần điều này để làm việc với CSS3 + HTML5
• một jsfiddle với các công cụ không mở rộng: http://jsfiddle.net/4b3RZ/10/
• nếu tôi đặt chỉ min-width trên các cột tôi nhận được một đoạn tỷ lệ: http://jsfiddle.net/4b3RZ/8/

dưới đây là một bảng về những gì thực sự được trả lại cho một số các thiết lập css khác nhau:

Answer 1

Các bảng hoạt động khác nhau; đôi khi phản trực giác.

Giải pháp là sử dụng width trên các ô trong bảng thay vì max-width.

Mặc dù nó có vẻ giống như trong trường hợp đó các tế bào sẽ không co lại dưới chiều rộng nhất định, chúng sẽ thực sự.
không có giới hạn về c, nếu bạn cho bảng có chiều rộng là 70px, độ rộng của a, b và c sẽ tương ứng là 16, 42 và 12 pixel.
Với chiều rộng bảng là 400 pixel, chúng hoạt động giống như bạn nói bạn mong đợi trong lưới của mình ở trên.
Chỉ khi bạn cố gắng để cho bảng quá nhỏ một kích thước (nhỏ hơn a.min + b.min + nội dung của C) nó sẽ thất bại: sau đó bản thân bảng sẽ rộng hơn quy định.

Tôi đã tạo một đoạn mã dựa trên fiddle của bạn, trong đó tôi đã xóa tất cả đường viền và phần đệm và khoảng cách đường viền, vì vậy bạn có thể đo chiều rộng chính xác hơn.

table { 
 
    width: 70px; 
 
} 
 

 
table, tbody, tr, td { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    border-spacing: 0; 
 
} 
 

 
.a, .c { 
 
    background-color: red; 
 
} 
 

 
.b { 
 
    background-color: #F77; 
 
} 
 

 
.a { 
 
    min-width: 10px; 
 
    width: 20px; 
 
    max-width: 20px; 
 
} 
 

 
.b { 
 
    min-width: 40px; 
 
    width: 45px; 
 
    max-width: 45px; 
 
} 
 

 
.c {}

<table> 
 
    <tr> 
 
    <td class="a">A</td> 
 
    <td class="b">B</td> 
 
    <td class="c">C</td> 
 
    </tr> 
 
</table>