セルの1つに長い行があるテーブルがあります。テーブルの幅が100％を超えないように、長い行を分割する必要があります。とを追加するtable-layout: fixedとword-wrap: word-break、長いセルがラップされることがわかりました。ただし、使用の副作用は、table-layoutすべての列の幅が同じになることです。
ここでその例を見ることができます：
最初の列の幅をその内容だけに合うように自動サイズにするにはどうすればよいですか？（つまり、この例では、1と2をその列に表示するのに十分な幅である必要があります。）
テーブル内のデータは動的にロードされるため、幅の値をハードコーディングするソリューションは、列の幅を事前に知る方法がないため、適切ではありません。私の唯一のオプションは、を使用することです。または他の要素<table>を使用することはできません。<div>
公式の仕様によれば、固定を使用するtable-layoutと、最初の行の列幅がテーブル全体の列幅を決定します。それらのいずれも定義されていない場合は、列幅が均等に分散されます。
他に選択肢がないように思われるので、私は次の方法を使用することになりました。
table-layoutが自動に設定されているときにテーブルにデータをロードします。table-layoutを固定に変更します。完全ではない例を次に示します（幅が少し狭くなります）。
私は同じ問題に取り組んでいるときにこれを発見しました：
要素にブレークワードを設定することは、その要素内に含まれるテキストのすべての文字の間にゼロ幅のスペースを挿入することに正確に対応します。
これが実際に通常の動的テーブルで機能することを除いて！
このソリューションは、Javascriptを必要としないため、非常に高速です。
（ただし、必要に応じてJavascriptから使用できます。ブレークワードを含むすべてのセルを検索し、すべての子テキストノードを取得し、すべての文字の間にゼロ幅スペースを挿入します。それでも、スクリプトはページの読み込み中に1回だけ実行されます。したがって、これは依然として非常にパフォーマンスが高いはずです。）
ゼロ幅スペースは​
ワードラップcssスタイルを使用して、長い文を分割できます。
word-wrap: break-word
DIVや固定テーブル（table-layout：fixed）で長い単語を処理/ラップするのは簡単です-CSS3のword-wrap：break-wordsを適用するだけです。
上記の動的テーブル内では、プロパティは作業の半分しか実行しません。さらに、ブラウザがブレークポイントを見つけるのを支援する必要があります。
もう少し詳細な説明は、動的テーブル内で長い単語をラップするの記事にあります。