Używaj pozostałej przestrzeni w równym stopniu dla kolumn z numerami n

Question

Jak skonfigurować tabelę tak, aby w ostatnich n kolumnach była używana dostępna szerokość tabeli?

W szczegółach: jestem generowania tabeli HTML w backend (ASP.NET MVC), który ma dwie kolumny nagłówka i różną liczbę kolumn danych:

 
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 

Stół ma szerokość = 100%, pierwsza i druga kolumna (ID i region) używają stałych szerokości.

Zawartość kolumn danych (zwłaszcza nagłówki) może być ciągami o różnej długości.

W jaki sposób ustawić CSS/JS tak, aby pozostałe kolumny miały taki sam rozmiar i korzystać z pełnej pozostałej szerokości tabeli?

Moją pierwszą myślą było po prostu ustawić style="@(100/NumberOfColumns)%;" na serwerze. Jednakże, ponieważ dwie pierwsze kolumny mają ustaloną szerokość i nie znam rozmiaru tabeli po stronie serwera, to podejście nie powiedzie się.

Answer 1

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

HTML kod:

<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

Spróbuj to tak:

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>