Verwenden Sie den verbleibenden Speicherplatz für n-Spalten gleich

Question

Wie kann ich eine Tabelle so einrichten, dass die letzten n Spalten die verfügbare Breite einer Tabelle gleichermaßen verwenden?

Im Detail: ich eine HTML-Tabelle in der Back-End-Generierung (ASP.NET MVC), die zwei Spalten Header Spalten und eine unterschiedliche Anzahl von Daten hat:

 
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 

Der Tisch hat eine Breite = 100%, die erste und zweite Spalte (ID und Region) verwenden feste Breiten.

Der Inhalt der Datenspalten (insbesondere die Header) können Strings unterschiedlicher Länge sein.

Wie kann ich CSS/JS so einrichten, dass die verbleibenden Spalten gleich groß sind - und die gesamte verbleibende Breite der Tabelle verwenden?

Mein erster Gedanke war, einfach style="@(100/NumberOfColumns)%;" auf dem Server zu setzen. Da jedoch die ersten beiden Spalten eine feste Breite haben und ich die Größe der Tabelle auf der Serverseite nicht kenne, schlägt dieser Ansatz fehl.

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

es auf diese Weise versuchen:

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>