HTML divの枠の中にtableを入れたい

実現したいこと

HTMLを用いて文字列2つの差分を表示させたいなと思っています。
divの中にtableを入れているのですが、divの枠の大きさよりもtableの方が大きくなっているためか、文字列が長くなると左右が見切れてしまってきちんと表示がされません。
divの枠内にしっかりとtableの内容を表示させたいです。
長くなったtableの内容は親要素のdivにoverflow-autoを入れているため、これを用いて横にスクロールして見れる形にしたいなと思っています。

発生している問題・分からないこと

table内の要素が親要素のdivの枠をはみ出しており正常に表示されない
tableの要素の大きさをdivの枠に収まるようにしたい

該当のソースコード

HTML
1<div style="width:100%;" class="d-flex justify-content-center overflow-auto">
2<style type="text/css">        
3table.diff {font-family:Courier; border:medium;}        
4td.diff_header {text-align:right}
5</style>    
6
7<table class="diff" id="difflib_chg_to0__top" cellspacing="0" cellpadding="0" rules="groups">        
8<tbody>    
9<tr>
10<th></th><th></th>    
11<th><div class="border fw-bold fs-4 col-12 text-center bg-info">テキスト1</div></th>    
12<th></th><th></th>    
13<th><div class="border fw-bold fs-4 col-12 text-center bg-info">テキスト2</div></th>            
14</tr>
15<tr><td class="diff_next" id="difflib_chg_to0__0"><a href="#difflib_chg_to0__top">t</a></td>
16<td class="diff_header" id="from0_1">1</td>
17<td nowrap="nowrap">
18<span class="diff_sub">てきすとてきすとてきすと</span></td>
19<td class="diff_next"><a href="#difflib_chg_to0__top">t</a></td>
20<td class="diff_header" id="to0_1">1</td>
21<td nowrap="nowrap"><span class="diff_add">てきすとてきすとてきすとwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</span></td></tr>        
22</tbody>    
23</table>
24</div>