CSSで固定幅の列を含むHTMLテーブルを作成する

Question

内容がさまざまな長さになる可能性があるため、テーブルの幅は固定されていて動的な高さにしたい。次に例を示します。

私は幅を固定しているが、内容が重複しています。私が間違っていることは何ですか？ここに私のコードは次のとおりです。

<table width="60%" align='center' cellpadding='2' 
     cellspacing='2' border='2' style='table-layout:fixed'> 
    <thead> 
     <tr> 
      <th>#</th> 
     </tr> 
    </thead> 
    <tbody> 
     ... 
    </tbody> 
</table> 

そして、私のCSS：

table{ 
font-size:12px; 
} 

table td{ 
    padding:5px; height:auto; 
    background:#f6f6f6; 
} 

table thead tr th{ 
    background:#d7dbe2; 
} 

すべてのアイデアは、高さを動的に作成する方法？

Answer 1

table td{ 
    word-wrap:break-word; 
} 

を削除することをお勧め;）

Answer 2

テキストには'breaking points'（空白など）がないと思われます。だから、テキストを複数の行に分割することはできません。 1つの解決策は、テキストが破損する可能性がある場所に­を追加することです。

Answer 3

問題はtable-layout: fixedの使用によって引き起こされる可能性が - 私は<th>タグのそれぞれにstyle="width: 150px;"を置くと、これは私のために働いtable-layout

Answer 4

<th>幅幅が<td>に優先します。したがって、単に<th>に幅を適用すると（Kolink氏が述べたように）オーバーフローの問題を解決するはずです。

table thead tr th{ 
    width:120px; 
}