Cột chất lỏng và cố định Bảng

Question

Tôi có một bảng trên bố cục của tôi có 5 cột, 3 cột nên được cố định chiều rộng trong px và 2 cột còn lại phải là chất lỏng.

Điều này nghe có vẻ đơn giản lúc đầu, nhưng vấn đề là hai cột chất lỏng nên hoạt động khác nhau.

Cột cuối cùng nên kéo dài càng nhiều càng tốt để vừa với nội dung của nó, vì vậy chúng không bao giờ bị ẩn, nhưng không bao giờ nên để trống không gian. Và cột giữa nên chiếm tất cả không gian trống mà nó có thể tìm thấy, nhưng cũng tràn để ẩn trong trường hợp cái cuối cùng cần phải lớn hơn.

Tôi cố gắng để làm cho công việc này với css, nhưng tôi không thể quản lý để làm cho nó làm việc ... Có cách nào để làm điều này với css tinh khiết hoặc tôi cần js?

EDIT

Đó là những gì tôi có cho đến nay:

HTML

<table> 
    <tr> 
     <td class="fixed">fixed</td> 
     <td class="fixed">fixed</td> 
     <td class="fluid hidden">fluid</td> 
     <td class="fixed">fixed</td> 
     <td class="fluid visible">this content should always be visible</td> 
    </tr>  
</table> 

CSS

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

td{ 
    padding: 10px; 
    white-space: nowrap; 
} 

.fixed{ 
    background-color: #ddd; 
    width: 60px; 
} 

.fluid{ 
    background-color: #aaa; 
} 

.visible{ 

} 

.hidden{ 
    overflow:hidden; 
} 

http://jsfiddle.net/KzVbX/

Nó hoạt động gần như mong đợi. Ngoại trừ cột cuối cùng.

Answer 1

Hãy thử điều này và xem nếu nó là gần với những gì bạn đang tìm kiếm:

DEMO - http://jsfiddle.net/WGpB3/

<table width="100%" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
      <td style="width:60px;">&nbsp;</td> 
      <td style="width:60px;">&nbsp;</td> 
      <td style="overflow:hidden;">&nbsp;</td> 
      <td style="width:60px;">&nbsp;</td> 
      <td style="overflow:visible;">&nbsp;</td> 
    </tr> 

Answer 2

Nếu bạn không cần gói làm điều này:

td{ 
    padding: 10px; 
} 

Nếu muốn, bạn cần thay đổi chiều rộng của bảng thành tự động và thêm tham số chiều rộng tối thiểu.

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

Answer 3

thay đổi Made đến file CSS

* DEMO - http://jsfiddle.net/KzVbX/2/

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

td{ 
    padding: 10px; 
} 

.fixed{ 
    background-color: #ddd; 
    width: 60px; 
} 

.fluid{ 
    background-color: #aaa; 
} 

.visible{ 
    overflow:visible; 
} 

.hidden{ 
    overflow:hidden; 
    max-width:20%; 
    white-space:nowrap; 
} 

Answer 4

lẽ tôi có thể giúp đỡ, có thể không.

Trước tiên, tôi sẽ sử dụng div thay vì tr/td. Tôi thành thật không có nhu cầu sử dụng các bảng kể từ khi CSS được giới thiệu, và tôi khá ngạc nhiên khi một số người vẫn làm. Nhưng có thể có một lý do, vì vậy xin đừng coi đó là lời chỉ trích.

Nếu bạn sử dụng divs, sau đó chỉnh sửa phần này của mã của bạn:

.visible { 
    overflow:visible; 
    min-width: 210px; 
} 

Điều đó sẽ đảm bảo rằng các div là ít nhất 210 pixel rộng không có vấn đề gì. Nó sẽ hoạt động. BTW, nếu đây là bảng duy nhất trên trang và div hoặc td đó là duy nhất theo nghĩa là nó có chiều cao tối thiểu thì bạn có thể muốn sử dụng id thay vì một lớp. Điều đó sẽ làm cho mã của bạn sạch hơn và thanh lịch hơn. Hy vọng điều này sẽ hữu ích.