Sử dụng không gian còn lại bằng nhau cho n-cột

Question

Làm cách nào để thiết lập bảng sao cho cột n cuối cùng sử dụng chiều rộng có sẵn của bảng bằng nhau?

Cụ thể: tôi là tạo ra một bảng HTML trong backend (ASP.NET MVC) mà có hai cột header và một số thay đổi của cột dữ liệu:

 
ID Region   Data col 1 Data col 2 ... Data col n 
_______________________________________________________ 
1 Region name 1 data   data    data 
2 Region 2   data   data    data 

... 

80 Another region data   data    data 

Bảng này có một width = 100%, cột đầu tiên và cột thứ hai (ID và Vùng) sử dụng độ rộng cố định.

Nội dung của các cột dữ liệu (đặc biệt là các tiêu đề) có thể là các chuỗi có độ dài khác nhau.

Làm cách nào để thiết lập CSS/JS để các cột còn lại có kích thước bằng nhau - và sử dụng toàn bộ chiều rộng còn lại của bảng?

Suy nghĩ đầu tiên của tôi là chỉ cần đặt style="@(100/NumberOfColumns)%;" trên máy chủ. Tuy nhiên, khi hai cột đầu tiên được cố định chiều rộng và tôi không biết kích thước của bảng ở phía máy chủ, cách tiếp cận này không thành công.

Answer 1

Fiddle: http://jsfiddle.net/Dadv2/2/

HTML Code:

<table width="100%"> 
    <tr> 
     <td style="width:100px;" class="fixCol">ID Region</td> 
     <td style="width:120px;" class="fixCol">Data</td> 
     <td class="Col">Col1</td> 
     <td class="Col">New Column</td> 
     <td class="Col">Another Column</td> 
    </tr> 
</table> 

JS Cod e:

$(document).ready(function(){ 
var tableWidth = $("table").width(); 
var colCount = $("table td.Col").size(); 

// gett fixed td Width 
fixCol = 0; 
$.each($("table td.fixCol"), function(){ 
    fixCol += $(this).width();  
}); 

//set remainging td width 
var tdWidth = (tableWidth-fixCol)/colCount; 


$("table .Col").css('width',tdWidth); 
}); 

Answer 2

Hãy thử nó theo cách này:

First Column min width : Xpx; 
Second Column min width : Ypx; 
Last N Columns width : (100/N) % 

HTML: (DEMO)

<table width="100%"> 
    <tr> 
     <td style="min-width:100px;">A</td> 
     <td style="min-width:300px;">A</td> 
     <td style="width:33%;">L</td> 
     <td style="width:33%;">L</td> 
     <td style="width:33%;">L</td> 
    </tr> 
</table>