他の人に動的な幅を維持しながら、長いテーブルセルをワードラッピングする

Question

私はそのセルの1つに長い線があるテーブルを持っています。テーブルが100％以上幅を超えないように、長い線を分割する必要があります。追加することでそれを見つけました table-layout: fixed と word-wrap: word-break, 、長いセルを包みます。ただし、使用の副作用 table-layout すべての列が同じ幅を持たせるということです。

ここでその例を見ることができます：

http://jsfiddle.net/rydld/2/

コンテンツのみに適合するように、最初の列の幅の自動サイズを作成するにはどうすればよいですか？ （つまり、この例では、 1 と 2 その列で。）

テーブル内のデータは動的にロードされるため、ハードコードをコードするソリューションは、列がどれだけ広いかを事前に知る方法がないため、良くありません。私の唯一のオプションは、aを使用することです <table>, 、使用できません <div> または他の要素。

Answer 1

による 公式仕様, 、固定を使用するとき table-layout, 、最初の行の列幅は、テーブルの列幅全体を決定します。それらのいずれも定義されていない場合、列の幅を均等に配布します。

他の選択肢はないように思われるので、私は次の方法を使用することになりました。

1. テーブルにデータをロードしながら table-layout 自動に設定されています。
2. 列の幅を読む私はダイナミックになりたいです。
3. これらの列幅を現在の値に設定します。
4. 変更 table-layout 修正する。

完璧ではない例を次に示します（幅は少し減少します）：

http://jsfiddle.net/rydld/7/

Answer 2

同じ問題に取り組んでいる間、私はこれを発見しました：

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

これを除いて、これが実際に通常の動的テーブルで動作します！

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

（ただし、必要に応じてJavaScriptから使用できます。すべてのセルを分割して見つけ、すべての子供のテキストノードをつかみ、すべての文字の間にゼロ幅空間を挿入します。したがって、これはまだ非常にパフォーマンスがあるはずです。）

幅のゼロスペースです ​

Answer 3

使用できます：Word-wrap CSSスタイルは長い文章を破ります。

word-wrap: break-word

Answer 4

長い単語を処理/包むのは簡単です div砂 テーブルを修正しました (テーブルレイアウト：修正） - CSS3を適用するだけです ワードラップ：ブレークワード.

以内に 動的テーブル 上記のプロパティは、作業の半分しかありません。さらに、ブラウザがブレークポイントを見つけるのを支援する必要があります。

もう少し詳細な説明は記事にあります ダイナミックテーブル内で長い単語をラップします.