2016-04-11 16 views
0

Wie kann ich Spalten unter colspan der gleichen Breite machen?Gleiche Spaltenbreite unter colspan

Ich habe Tabellenkopf wie im Beispiel.

<html> 
<head> 
<style>td {border: solid 1px black;}</style> 
</head> 
<body> 
<table style="width: 100%;border-collapse: collapse;"> 
    <tr> 
     <td rowspan="2">Some header columns or even several(big or small)</td> 
     <td colspan="4">pre-defined number of undercolumns</td> 
    </tr> 
    <tr> 
     <td>1</td><td>11</td><td>111</td><td>1111</td> 
    </tr> 
    <tr> 
     <td>data_row</td><td>4444</td><td>333</td><td>22</td><td>1</td> 
    </tr> 
</table> 
</body> 
</html> 

Ich habe eine jsFiddle geschaffen, dies zeigt.

Möglicherweise könnte die Anzahl der Spalten (um die gleiche Breite zu machen) unterschiedlich sein. Das Ändern der table-layout zu fixed ist keine Lösung in meinem Fall wegen der Existenz anderer Spalten. Ich kann sie nicht mit fester Breite machen, da ich mich nicht sicher bin, wie lang die Daten sind. Ich kann sie auch nicht mit Prozent Breite tun, da es Prozent aller Tabellen ist, aber nicht Spaltengruppe.

+0

Ich habe immer noch keine richtige Lösung, aber nächste Problemumgehung: Ich habe nur "min-width" auf Spaltenüberschriften als größte von ihnen (in meinem Fall ist es möglich). –

Antwort

0

Sie können dies versuchen:

td { 
    border: solid 1px black; 
    width: calc(100%/5); 
} 

Und Sie können die Breite so viele Spalten unterteilen, wie Sie haben.

+0

passt es mir auch nicht. https://jsfiddle.net/6brwy20t/8/ Wie gesagt, ich versuche, die Breite des linken und rechten Teiles –

+0

Mann nicht vorzugeben Sie haben gebeten, Spalten unter colspan gleiche Breite zu machen. Versuchen Sie, Ihre Frage klarer zu machen. –

+0

Ich suche etwas wie 'width: calc (100%/5);' wobei '100%' für einige Spaltengruppen gilt, aber nicht für ganze

. Html würde als Bericht dynamisch aus XML via XSLT generiert werden. Und es sollte mit 2 Spalten oder 15 im rechten Teil nett aussehen –