Struggling with HTML formatting.
I'm facing an issue where I have a table nested inside a div. The div has a fixed width of 200px and the td elements are added dynamically. Despite setting each td to be 100px wide, when five td elements are added, totaling 500px, the scroll bar fails to appear and the column width adjusts automatically.
<div style="border:1px solid black;width:200px;overflow:auto">
<table style="border:1px solid black;">
<tr style="border:1px solid black;">
<td style="border:1px solid black;width:100px">1</td>
<td style="border:1px solid black;width:100px">2</td>
<td style="border:1px solid black;width:100px">3</td>
<td style="border:1px solid black;width:100px">4</td>
<td style="border:1px solid black;width:100px">5</td>
</tr>
</table>
<div>
Desperately seeking a solution for adding a scroll bar to the div as new td elements are added without them auto-adjusting in size. Unfortunately, cannot modify the table width directly. Any assistance would be greatly appreciated.