動的な幅を維持しながら長い表のセルをワードラップする

Question

テーブルのセルに長い行があります。私はテーブルが100％以上の幅にならないように分割するために長い線が必要です。私はtable-layout: fixedとword-wrap: word-breakを追加することで、長いセルをラップすることに気付きました。ただし、table-layoutを使用する副作用は、すべての列の幅が同じになるということです。

あなたはここにその例を見ることができます：

http://jsfiddle.net/RYdLd/2/

にはどうすればいいだけ、その内容に合うように、最初の列の幅の自動サイズを作ることができますか？ （つまり、この例では、その列に1と2を表示するのに十分な幅である必要があります）。

テーブルのデータは動的に読み込まれるため、幅の値をハードコードするソリューションはうまくいかない列がどのくらい広いかを事前に知る方法はありません。私の唯一の選択肢は<table>です。<div>などの要素は使用できません。

Answer 1

あなたが固定table-layoutを使用official specificationによれば、最初の行の列の幅は、テーブル全体の列幅を決定します。いずれも定義されていない場合は、列の幅を均等に分散します。

1. table-layoutがautoに設定されている間、テーブル内のデータをロード：

   他のオプションがあるようには思えないので

   、私は次の方法を使用して終了しました。
2. 列の幅の読み取り私は動的になりたい。
3. これらの列の幅を現在の値に設定します。
4. table-layoutを固定に変更しました。

ここで（幅が少し減少します）完璧ではない例を示します

http://jsfiddle.net/RYdLd/7/

Answer 2

次のように使用できます。長い文章を壊すための単語ラップCSSスタイル。

word-wrap: break-word 

Answer 3

同じ問題と格闘しながら、私はこれを発見：

はブレークを設定します要素の-wordは、その要素の内部に含まれるテキストの各文字の間にゼロ幅のスペースを挿入することに正確に対応します。

これは実際には、通常のダイナミックテーブルで動作します。

このソリューションはJavascriptを必要としないため、非常に高速です。

（ただし、必要に応じてJavascriptから使用することができます）すべてのセルをブレークワードで検索し、すべての子テキストノードを取得し、すべての文字の間にゼロ幅のスペースを挿入します。ページの読み込み中に、これはまだ非常に実行可能であるはずです。）を固定 - ちょうどCSS3 ワードラップを適用します。）

ゼロ幅スペースは​

Answer 4

であることはDIV sおよび固定テーブル（テーブルレイアウトで長い単語をラップ/扱いやすいです：ブレークワード。

ダイナミックテーブル上記のプロパティは、作業の半分しか行いません。さらに、ブラウザがブレークポイントを見つけるのを助ける必要があります。

さらに詳しい説明は、Wrap long words within dynamic tablesの記事にあります。