テーブルの最初の列の幅を固定します

Question

私はスクロール可能な本体を備えた基本的なテーブルを持っています。私はtheadとtbodyディスプレイを設定しなければならなかった：ブロックと私はまたthとtdの幅を設定します。

何らかの理由で、最初の列thが最初の列tdsと並んでいません。 それを引き起こす原因を教えてもらえますか？表示：ここではCSS

thead, 
tbody { 
    display: block; 
} 

thead { 
    text-align: left; 
} 

tbody { 
    background: yellow; 
    overflow-y: auto; 
    height: 6em; 
} 

thead th, 
tbody td { 
    width: 4em; 
    padding: 2px; 
} 

thead tr th:first-child, 
tbody tr td:first-child { 
    width: 8em; 
    background: salmon; 
    font-weight: normal; 
} 

がFiddle

Answer 1

DIV & TABLEの幅は異なっています。

使用max-width & min-widthあなたが望む結果を得るために：

thead tr th:first-child, 
tbody tr td:first-child { 
    width: 8em; 
    min-width: 8em; 
    max-width: 8em; 
    word-break: break-all; 
} 

編集：

（答えを編集するにはHTMLで幅の作業を明確に私が何かを得れば、指摘してください間違っているか何かを逃した！）

divのwidthプロパティでは、要素&のizeは、兄弟の親の幅に関係なく、それに適合する。&兄弟の幅。

しかし、テーブルの場合、内容に応じて要素のサイズが計算され、&のwidthプロパティが優先されます。兄弟の大きささえ考慮されます。したがって、私たちが望むサイズを強制的に追加するには、min-width & max-widthのような追加のプロパティを使用する必要があります。

Answer 2

は、あなたの最初のスタイルルール削除でこれを行うことによりTBODYとTHEAD

からブロックを、あなたはオーバー乗っテーブルの書式設定をし、表示されるレイアウト：表は

thead, 
tbody { 
// display: block; 
} 

Fixed