CSS Tabelle: fixed-Header und gleiche Spaltenbreite für <td> und <th>

Question

Ich mag eine reine CSS-Lösung mit einem festen Tabellenkopf und gleicher Spaltenbreite für <th> und <td> mit unterschiedlichem Inhalt. Ich habe ein Beispiel genommen und modifiziert es Spalte mit unterschiedlichen Inhalten zu erhalten: http://jsfiddle.net/jd72op9n/4/

table tbody,table thead { 
    display: block; /* comment to get same column with*/ 
} 
table tbody { 
    overflow: auto; 
    height: 100px; 
} 

Es scheint, dass ich nicht beides haben: http://jsfiddle.net/jd72op9n/4/

1. Wenn nehme ich einen festen Header, aber die Spalten für th bekommen und td sind nicht gleich.
2. Wenn ich "Anzeige: Block" entfernen, bekomme ich die richtige Spalte, aber nicht festen Header.

Haben Sie eine Lösung, um beides zu bekommen?

Answer 1

Ich denke, der einzige Weg ist, um die Breite der Zellen wie folgt streng zu spezifizieren:

table th, table td{ 
    width: 80px; 
} 
tbody{ 
    width: 100%; 
    margin-right: 20px; 
} 

Bitte versuchen Sie diese fiddle

Und wenn Sie wollen Breite auf bestimmte Zelle beispielsweise ändern, um die 4. mit dem langen Text, können Sie diese CSS-Regel hinzufügen:

th:nth-child(4), td:nth-child(4){ 
    width: 120px; 
} 

Answer 2

http://jsfiddle.net/patelnirpendra/2bs886p0/

css:

table tbody,table thead { 
    display: block; 
} 

table{ 
    border: 1px solid black; 
    table-layout: fixed; 
} 

th, td { 
    border: 1px solid black; 
    overflow: hidden; 
    width: 150px; 
}