CSSテーブル：​​の固定ヘッダーと同じ列幅<th>

Question

異なる内容の固定テーブルヘッダーと同じ列幅の<th>と<td>の純粋なCSSソリューションが必要です。私は例をとって、それは異なる内容でカラムを取得するために変更した：私は固定ヘッダを取得http://jsfiddle.net/jd72op9n/4/を取るが、目の列場合

1. ：http://jsfiddle.net/jd72op9n/4/

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

   私が両方を持つことができないようですとtdは同じではありません。

2. 私は「表示：ブロック」を削除した場合、私が正しい列を取得しますが、ヘッダーを固定されていません。

あなたは両方を取得するためのソリューションを持っていますか？

Answer 1

私は唯一の方法は、厳密にこのようなセルの幅を指定することであると思います。

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

このfiddle

を試してみて、あなたが特定のセルに幅を変更したい場合は、例えば下さい

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

Answer 2

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

：長いテキストを持つ第四、あなたはこのCSSルールを追加することができます

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; 
}