テーブルでCSSワードラップが機能しない

Question

固定ヘッダー、Y軸にスクロール可能なテーブル本体（X軸ではありません）と固定幅の列を持つテーブルを作成する必要があります。

私は私の問題にこの答えを見つけました：（多くの感謝！）それは魔法のように動作https://stackoverflow.com/a/17585032/6033166

、私はこの答えに私のコードをベースにし始めました。私は、私の追加要件に取り組むために、table-layout: fixed、word-wrap: break-wordおよびoverflow-y: auto; overflow-x: hidden;を追加しました。

ただし、1つの問題が残ります。テーブルセルに非常に長いテキストが入力された場合（またはごくわずかな空白がある場合）、行区切りは追加されませんが、幅はブルートフォースによって変更され、テーブル行は大きいエントリー、他の細胞を側面に押し込む。

私は<wbr>タグをコンテンツに追加して、改行をいつ行うべきかをブラウザに示唆するとの回答と提案を見つけました。ここでの問題は、コンテンツがデータベースから（C＃経由で）取得され、表示する前に処理する必要があり、可能であれば、スキップしたいステップです。方法があれば、私はCSSでこれを保持したいと思います。しかし、他の可能性がなければ、他のソリューションにも非常にオープンです。
私も同じことをやってみました。

これは、テーブルのための私の現在のCSSです：

table.tableSection { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    word-wrap: break-word; 
} 
table.tableSection thead, table.tableSection tbody { 
    float: left; 
    width: 100%; 
} 
table.tableSection tbody { 
    overflow-y: auto; 
    overflow-x: hidden; 
    height: 100px; 
} 
table.tableSection tr { 
    width: 100%; 
    display: table; 
    text-align: left; 
} 
table.tableSection th, table.tableSection td { 
    width: 33%; 
} 

そして、これはHTMLコードです：

<table class="tableSection"> 
<thead> 
    <tr> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Text</td> 
     <td>Text</td> 
     <td>Text</td> 
    </tr> 
    <tr> 
     <td>Text</td> 
     <td>This does work very well with blank spaces. The text has no limitation in size, line breaks will simply be added.</td> 
     <td>Text</td> 
    </tr> 
    <tr> 
     <td>Text</td> 
     <td>This_does_not_work_sadly,_which_is_a_huge_problem,_since_blank_spaces_are_not_permitted_as_word_delimiters.</td> 
     <td>Text</td> 
    </tr> 
    <tr> 
     <td>Text</td> 
     <td>Text</td> 
     <td>Text</td> 
    </tr> 
</tbody> 

ここ

は私が何を意味するかを証明するために私jsfiddleへのリンクです：https://jsfiddle.net/Fi_Vi/bmc7r8rz/3/

Answer 1

ここtable.tableSection th, table.tableSection td { ... }

word-break: break-all; 

あなたのTDのCSSスタイルに次のコードを追加更新フィドルさ： https://jsfiddle.net/bmc7r8rz/8/

Answer 2

私は単純に使用します：

table.tableSection th, table.tableSection td { 
    float: left; 
    width: 33%; 
    word-wrap: break-all; 
}