我创建一个具有17列的表，并且该表超出了引导网格12 没有滚动条的情况下如何创建响应式表？ 附加图像以显示代码结果并显示问题 请注意 设计中有侧边栏菜单，它占用了屏幕宽度
<table id="tablePreview" class="table table-hover table-sm" >
<!--Table head-->
<thead>
<tr>
<th>Tooth #</th>
<th>ur 8</th>
<th>ur 7</th>
<th>ur 6</th>
<th>ur 5</th>
<th>ur 4</th>
<th>ur 3</th>
<th>ur 2</th>
<th>ur 1</th>
<th>ul 1</th>
<th>ul 2</th>
<th>ul 3</th>
<th>ul 4</th>
<th>ul 5</th>
<th>ul 6</th>
<th>ul 7</th>
<th>ul 8</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
<th scope='row'>Image</th>
<td style='position: relative; height :290px'>
<img id="img_plr_8_1" src="images/pr8.png" alt="present LR8" style="display: block; position: absolute; left: 0px;">
<img id="img_elr_8_4" src="images/er8.png" alt="Endo LR8" style="display: none; position: absolute; left: 0px;">
<img id="img_ilr_8_5" src="images/ir8.png" alt="Implant LR8" style="display: none; position: absolute; left: 0px;">
<img id="img_nclr_8_2" src="images/ncr8.png" alt="Not Caries LR8" style="display: block; position: absolute; left: 0px;">
<img id="img_clr_8_3" src="images/cr8.png" alt="Caries LR8" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_plr_7_1" src="images/pr7.png" alt="present LR7" style="display: block; position: absolute; left: 0px;">
<img id="img_elr_7_4" src="images/er7.png" alt="Endo LR7" style="display: none; position: absolute; left: 0px;">
<img id="img_ilr_7_5" src="images/ir7.png" alt="Implant LR7" style="display: none; position: absolute; left: 0px;">
<img id="img_nclr_7_2" src="images/ncr7.png" alt="Not Caries LR7" style="display: block; position: absolute; left: 0px;">
<img id="img_clr_7_3" src="images/cr7.png" alt="Caries LR7" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_plr_6_1" src="images/pr6.png" alt="present LR6" style="display: block; position: absolute; left: 0px;">
<img id="img_elr_6_4" src="images/er6.png" alt="Endo LR6" style="display: none; position: absolute; left: 0px;">
<img id="img_ilr_6_5" src="images/ir6.png" alt="Implant LR6" style="display: none; position: absolute; left: 0px;">
<img id="img_nclr_6_2" src="images/ncr6.png" alt="Not Caries LR6" style="display: block; position: absolute; left: 0px;">
<img id="img_clr_6_3" src="images/cr6.png" alt="Caries LR6" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_plr_5_1" src="images/pr5.png" alt="present LR5" style="display: block; position: absolute; left: 0px;">
<img id="img_elr_5_4" src="images/er5.png" alt="Endo LR5" style="display: none; position: absolute; left: 0px;">
<img id="img_ilr_5_5" src="images/ir5.png" alt="Implant LR5" style="display: none; position: absolute; left: 0px;">
<img id="img_nclr_5_2" src="images/ncr5.png" alt="Not Caries LR5" style="display: block; position: absolute; left: 0px;">
<img id="img_clr_5_3" src="images/cr5.png" alt="Caries LR5" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_plr_4_1" src="images/pr4.png" alt="present LR4" style="display: block; position: absolute; left: 0px;">
<img id="img_elr_4_4" src="images/er4.png" alt="Endo LR4" style="display: none; position: absolute; left: 0px;">
<img id="img_ilr_4_5" src="images/ir4.png" alt="Implant LR4" style="display: none; position: absolute; left: 0px;">
<img id="img_nclr_4_2" src="images/ncr4.png" alt="Not Caries LR4" style="display: block; position: absolute; left: 0px;">
<img id="img_clr_4_3" src="images/cr4.png" alt="Caries LR4" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_plr_3_1" src="images/pr3.png" alt="present LR3" style="display: block; position: absolute; left: 0px;">
<img id="img_elr_3_4" src="images/er3.png" alt="Endo LR3" style="display: none; position: absolute; left: 0px;">
<img id="img_ilr_3_5" src="images/ir3.png" alt="Implant LR3" style="display: none; position: absolute; left: 0px;">
<img id="img_nclr_3_2" src="images/ncr3.png" alt="Not Caries LR3" style="display: block; position: absolute; left: 0px;">
<img id="img_clr_3_3" src="images/cr3.png" alt="Caries LR3" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_plr_2_1" src="images/pr2.png" alt="present LR2" style="display: block; position: absolute; left: 0px;">
<img id="img_elr_2_4" src="images/er2.png" alt="Endo LR2" style="display: none; position: absolute; left: 0px;">
<img id="img_ilr_2_5" src="images/ir2.png" alt="Implant LR2" style="display: none; position: absolute; left: 0px;">
<img id="img_nclr_2_2" src="images/ncr2.png" alt="Not Caries LR2" style="display: block; position: absolute; left: 0px;">
<img id="img_clr_2_3" src="images/cr2.png" alt="Caries LR2" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_plr_1_1" src="images/pr1.png" alt="present LR1" style="display: block; position: absolute; left: 0px;">
<img id="img_elr_1_4" src="images/er1.png" alt="Endo LR1" style="display: none; position: absolute; left: 0px;">
<img id="img_ilr_1_5" src="images/ir1.png" alt="Implant LR1" style="display: none; position: absolute; left: 0px;">
<img id="img_nclr_1_2" src="images/ncr1.png" alt="Not Caries LR1" style="display: block; position: absolute; left: 0px;">
<img id="img_clr_1_3" src="images/cr1.png" alt="Caries LR1" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_pll_1_1" src="images/pl1.png" alt="present LL1" style="display: block; position: absolute; left: 0px;">
<img id="img_ell_1_4" src="images/el1.png" alt="Endo LL1" style="display: none; position: absolute; left: 0px;">
<img id="img_ill_1_5" src="images/il3.png" alt="Implant LL1" style="display: none; position: absolute; left: 0px;">
<img id="img_ncll_1_2" src="images/ncl1.png" alt="Not Caries LL1" style="display: block; position: absolute; left: 0px;">
<img id="img_cll_1_3" src="images/cl1.png" alt="Caries LL1" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_pll_2_1" src="images/pl2.png" alt="present LL2" style="display: block; position: absolute; left: 0px;">
<img id="img_ell_2_4" src="images/el3.png" alt="Endo LL2" style="display: none; position: absolute; left: 0px;">
<img id="img_ill_2_5" src="images/il4.png" alt="Implant LL2" style="display: none; position: absolute; left: 0px;">
<img id="img_ncll_2_2" src="images/ncl2.png" alt="Not Caries LL2" style="display: block; position: absolute; left: 0px;">
<img id="img_cll_2_3" src="images/cl2.png" alt="Caries LL2" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_pll_3_1" src="images/pl3.png" alt="present LL3" style="display: block; position: absolute; left: 0px;">
<img id="img_ell_3_4" src="images/el3.png" alt="Endo LL3" style="display: none; position: absolute; left: 0px;">
<img id="img_ill_3_5" src="images/il5.png" alt="Implant LL3" style="display: none; position: absolute; left: 0px;">
<img id="img_ncll_3_2" src="images/ncl3.png" alt="Not Caries LL3" style="display: block; position: absolute; left: 0px;">
<img id="img_cll_3_3" src="images/cl3.png" alt="Caries LL3" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_pll_4_1" src="images/pl4.png" alt="present LL4" style="display: block; position: absolute; left: 0px;">
<img id="img_ell_4_4" src="images/el4.png" alt="Endo LL4" style="display: none; position: absolute; left: 0px;">
<img id="img_ill_4_5" src="images/il6.png" alt="Implant LL4" style="display: none; position: absolute; left: 0px;">
<img id="img_ncll_4_2" src="images/ncl4.png" alt="Not Caries LL4" style="display: block; position: absolute; left: 0px;">
<img id="img_cll_4_3" src="images/cl4.png" alt="Caries LL4" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_pll_5_1" src="images/pl5.png" alt="present LL5" style="display: block; position: absolute; left: 0px;">
<img id="img_ell_5_4" src="images/el5.png" alt="Endo LL5" style="display: none; position: absolute; left: 0px;">
<img id="img_ill_5_5" src="images/il7.png" alt="Implant LL5" style="display: none; position: absolute; left: 0px;">
<img id="img_ncll_5_2" src="images/ncl5.png" alt="Not Caries LL5" style="display: block; position: absolute; left: 0px;">
<img id="img_cll_5_3" src="images/cl5.png" alt="Caries LL5" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_pll_6_1" src="images/pl6.png" alt="present LL6" style="display: block; position: absolute; left: 0px;">
<img id="img_ell_6_4" src="images/el4.png" alt="Endo LL6" style="display: none; position: absolute; left: 0px;">
<img id="img_ill_6_5" src="images/il8.png" alt="Implant LL6" style="display: none; position: absolute; left: 0px;">
<img id="img_ncll_6_2" src="images/ncl6.png" alt="Not Caries LL6" style="display: block; position: absolute; left: 0px;">
<img id="img_cll_6_3" src="images/cl6.png" alt="Caries LL6" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_pll_7_1" src="images/pl7.png" alt="present LL7" style="display: block; position: absolute; left: 0px;">
<img id="img_ell_7_4" src="images/el7.png" alt="Endo LL7" style="display: none; position: absolute; left: 0px;">
<img id="img_ill_7_5" src="images/il1.png" alt="Implant LL7" style="display: none; position: absolute; left: 0px;">
<img id="img_ncll_7_2" src="images/ncl7.png" alt="Not Caries LL7" style="display: block; position: absolute; left: 0px;">
<img id="img_cll_7_3" src="images/cl7.png" alt="Caries LL7" style="display: none; position: absolute; left: 0px;">
</td>
<td style='position: relative; height :290px'>
<img id="img_pll_8_1" src="images/pl8.png" alt="present LL8" style="display: block; position: absolute; left: 0px;">
<img id="img_ell_8_4" src="images/el8.png" alt="Endo LL8" style="display: none; position: absolute; left: 0px;">
<img id="img_ill_8_5" src="images/il2.png" alt="Implant LL8" style="display: none; position: absolute; left: 0px;">
<img id="img_ncll_8_2" src="images/ncl8.png" alt="Not Caries LL8" style="display: block; position: absolute; left: 0px;">
<img id="img_cll_8_3" src="images/cl8.png" alt="Caries LL8" style="display: none; position: absolute; left: 0px;">
</td>
</tr>
</tbody>
<!--Table body-->
</table>
<!--Table-->
我该怎么做才能在负责任的观点中制表？
