Bảng HTML - Bảng chiều rộng 100%, kết hợp chiều rộng cố định và cột lỏng UNIFORM

Question

Tôi đang cố gắng tạo lịch tùy chỉnh trong HTML và Javascript nơi bạn có thể kéo và thả tác vụ từ ngày này sang ngày khác. Tôi muốn có cột đầu tiên và hai cột cuối cùng là chiều rộng cố định và có các cột còn lại (từ Thứ Hai đến Thứ Sáu) để bảng luôn lấp đầy 100% của nó.

Vấn đề mà tôi đang gặp phải là chất lỏng của TD tự động định kích thước dựa trên lượng nội dung trong đó, nghĩa là khi tôi kéo công việc từ ngày này sang ngày khác thì chiều rộng cột sẽ thay đổi kích thước. Tôi muốn có thứ hai đến thứ sáu được chính xác kích thước tương tự bất kể nội dung và không có thiết lập tràn văn bản: ẩn; (như các tác vụ cần phải hiển thị)

tức là tôi muốn các cột màu xám cố định chiều rộng và cột màu đỏ lỏng nhưng đồng nhất với nhau bất kể nội dung bên trong chúng.

Chỉnh sửa: Tôi đang sử dụng jQuery cho chức năng kéo và thả để giải pháp JavaScript cũng OK (mặc dù không thích hợp hơn).

JSFiddle Live example

HTML:

<table> 
    <tr> 
    <th class="row_header">Row Header</th> 
    <th class="fluid">Mon</th> 
    <th class="fluid">Tue</th> 
    <th class="fluid">Wed</th> 
    <th class="fluid">Thurs</th> 
    <th class="fluid">Fri</th> 
    <th class="weekend">Sat</th> 
    <th class="weekend">Sun</th> 
    </tr> 
    <tr> 
    <td>Before Lunch</td> 
    <td>This col will be wider than the others because it has lots of content...</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td>But I would really like them to always be the same size!</td> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

CSS:

table { 
     width: 100%; 
    }  

    td, th { 
     border:1px solid black; 
    } 

    th { 
     font-weight:bold;    
     background:red; 
    } 

    .row_header { 
     width:50px; 
     background:#ccc; 
    } 

    .weekend { 
     width:100px; 
     background:#ccc; 
    } 

    .fluid { 
     ??? 
    } 

Answer 1

Sử dụng jQuery (có thể có thể được thực hiện với JS thường xuyên quá, nhưng tôi thích nó cho các loại hình công việc):

(Lưu ý: Tôi đã bàn một ID để nó sẽ được dễ dàng hơn để chọn , có thể được thực hiện mà không cần nó với một chút tinkering)

$(function() { 
     var $my_table = $("#my_table") 
      ,current_width = $my_table.width() 
      ,fluid_columns = $("table .fluid") 
      ,spread_width = (current_width - 150)/fluid_columns.length; 

     fluid_columns.width(spread_width); 

     $(window).on("resize", function() { 
      current_width = $my_table.width(); 
      spread_width = (current_width - 150)/fluid_columns.length; 
      fluid_columns.width(spread_width); 
     }) 
    }); 

Answer 2

bạn có thể có thể làm:

.fluid { 
    width:10%; 
} 

Answer 3

Làm thế nào về điều này chỉ sử dụng CSS?

http://jsfiddle.net/T6YNK/16/

Answer 4

Danny,

Tôi nghĩ rằng đây là những gì bạn đang tìm kiếm.

Fiddle đây http://jsfiddle.net/T6YNK/22/

Đã đăng ký Chrome.

Mã

   <table> 
     <tr> 
     <th class="row_header">Row Header</th> 
     <th class="fluid">Mon</th> 
     <th class="fluid">Tue</th> 
     <th class="fluid">Wed</th> 
     <th class="fluid">Thurs</th> 
     <th class="fluid">Fri</th> 
     <th class="weekend">Sat</th> 
     <th class="weekend">Sun</th> 
     </tr> 
     <tr> 
     <td>Before Lunch</td> 
     <td>This col will be wider than the others because it has lots of content...</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>But I would really like them to always be the same size!</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
    </table> 

    <style type="text/css"> 

     table { 
      width: 100%; 
     }   

     td, th { 
      border:1px solid black; 
     } 

     th { 
      font-weight:bold;    
      background:red; 
     } 

     .row_header { 
      width:50px; 
      background:#ccc; 
     } 

     .weekend { 
      width:100px; 
      background:#ccc; 
     } 

     td, 
     th  { 
      overflow:hidden; 
     } 
    .fluid { 

} 
.weekend, 
.row_header{ 
width:50px !important; 

} 

table{ 
    border: 1px solid black; 
    table-layout: fixed; 
    width:100%; 

} 
    </style>​