Google Chrome や Microsoft Edge で再現しなかったので発見が遅れました…。
タイトル通り、<table> 要素の <td> 内に記述した文字列が、<table> 要素の親要素からはみ出て表示されてしまうときの対処方法についてです。
修正自体は特に難しいものでもなかったのですが、今後もやらかしそうな内容だったので覚え書きとしてまとめました。
HTML は下記のようになっていました。
<div>
<table>
<tr>
<th>見出し</th>
<td>本文本文本文本文本文本文本文本文…</td>
</tr>
</table>
</div>
<td> 要素内のテキストはもう少し長かったのですが、この要素が一番外側の <div> 要素からもはみ出して表示されているという状態でした。
こちらの修正方法ですが、<table> 要素に width プロパティで横幅を指定したら、文字列が折り返して表示されるようになり、はみ出さなくなりました。
word-break や word-wrap などのプロパティは特に指定せず、width だけの指定で大丈夫なようでした。
かなりあっさりと解決できたので良かったです！
以上、Safari でのみ Table 要素の td 内の文字列が親要素からはみ出る場合の対処方法についてでした。
ご参考になれば幸いです。
