テーブル内で「word-wrap: break-word」を使用する [重複]。

質問

重複の可能性があります。

htmlのテーブルでワードラップする

このテキストは、Google Chrome（および他のモダンブラウザ）上で私が望むように正確に動作します。

<div style="border: 1px solid black; width:100%; word-wrap: break-word;">
  <p>
    aaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  </p>
</div>

1. ブラウザの幅が十分ある場合、a+とb+は同じ行になります。

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   
   

2. ブラウザを絞り込むと、a+とb+が別々の行になります。

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   
   

3. b+が収まりきらなくなると、壊れて2行になる（合計3行になる）。

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbb
   bbbbbbbb
   
   

以上、素晴らしいですね。

しかし、私の状況では、これは div ではなく table のように

<table style="border:1px solid black; width:100%; word-wrap:break-word;">
  <tr>
    <td>
      <p>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      </p>
    </td>
  </tr>
</table>

この場合、#1 と#2 は起こりますが、#3 は起こりません。つまり、テーブルはステップ2の後で絞込みが止まり、ステップ3は一度も起こりません。ブレークワードがフィルタリングされていないようです。

どなたか、#3 を実現する方法をご存知ですか？ 解決策は Chrome でのみ動作する必要がありますが、他のブラウザーでも動作すればさらによいでしょう。

P.S. "テーブルを使わないでください"は役に立ちません。

どのように解決するのですか？

table-layout: fixed を使用すると、セルをテーブルに合わせるように強制されます（その逆はありません）。

<table style="border: 1px solid black; width: 100%; word-wrap:break-word;
              table-layout: fixed;">
  <tr>
    <td>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    </td>
  </tr>
</table>