I used to have a webpage with multiple (4) HTML tables all contained within one div that spanned the entire page, serving only as an indicator for the tables' starting point. It all worked perfectly until a recent Chrome update caused chaos with the tables and text, causing them to shift unpredictably.
Does anyone have any suggestions on a more efficient approach for this? I came across a recommendation to nest these tables within a larger table, which does solve the issue, but it also affects the CSS coloring I use for alternating row shades across the entire page.
Below is a snippet of my current code:
<div>
Title Above Table:
<br><br>
<table>
<tr><td>
table data
</td></tr>
</table>
<br><br>
Second Title Above Table:
<br><br>
<table>
<tr><td>
table data
</td></tr>
</table>
<br><br>
</div>
Feel free to visit the live site here:
If you refresh the page a few times, you'll notice the text shifting around the tables, sometimes even causing different tables to overlap each other.
Thank you!