htmlテーブルの伸びを防ぐには

Question

テーブルセルのデータが長すぎると、セルが伸びてテーブル全体のレイアウトが変形することがあります。どうすればこれを防ぐことができますか？

Answer 1

CSSを使用してtdタグの幅と高さを設定します。次に、オーバーフローに対処する必要があります。

td { 
    width: 40px; 
    height: 20px; 
} 

Answer 2

あなたは、セル内のスペースなしで任意の非破壊スペースや超長いテキストを持っていないと仮定すると、私は通常、明示的にCSSを経由して言ったセルの幅を設定することで、最高の幸運を持っていた（と思われます"width = '100'"のような処理よりもうまく動作するようにします。セル内のデータが本当に長い文字列の場合、プログラムで切り捨てるだけでなく、divのデータを明示的にオーバーフローのような幅と何か：（あなたが水平スクロールバーか何かをしたい場合は、オート）/オート隠さ

Answer 3

使用overflow: hiddenようなオーバーフロー非表示にするには：。

を

これを行うには、<td>または<th>タグに幅を割り当てる必要があります。

Answer 4

あなたは絶対にテーブルがそれも非破壊スペースの顔にレイアウトです維持する必要がある場合、その後、あなたが使用する必要があります：

overflow: hidden; 

しかし、私はそれに対してお勧めします。 IMOでは、レイアウトよりも読みやすいデータを持つことが重要です。

Answer 5

おそらくtable-layout:fixedが必要で、行の最初のセルに幅を設定します。

詳細な説明はhttp://www.w3.org/TR/CSS2/tables.html#fixed-table-layoutを参照してください。

Answer 6

私は同じ問題を抱えていたし、これでそれを解決することになった：

table { width: 1px; /* This ugly hack allows the table to be only as wide as necessary, breaking text on spaces to allow cells to be less wide. */ } 

どうやら、それはテキストアップを破り、あまり横のスペースを取るために何か非常に小さな力にテーブルの幅を設定します。言葉が壊れないので、表は少なくとも各列の最大の単語に十分な大きさになります。

上でテストし、真しようとしました：

のLinux（Ubuntuの10.04）

• のFirefox 3.6.18
• クロムブラウザ12.0.742.112あらゆる手段を全て（90304）
• Konqueror 4.5.3
• SeaMonkey 2.0.11

のWindows：

• のInternet Explorer 7
• のFirefox 4.0。1

誰か（私はできません、私の現在の状況では）IE、Firefoxの、クロム、Safariやオペラの最新バージョンでこれをテストしてコメントを残したり、この答えを編集できますが、それは素晴らしいだろう場合！