I use a lot of tables on my pages to provide a comparative overview. And since sometimes there is a lot to show, I use div overflow-x auto and add my table code inside so when the screen is not wide enough there’s this horizontal bar appears at the bottom of the table.
What I have noticed is that, when I have too many columns which cause this horizontal bar to appear on my laptop screen, the following text after div gets very close to the bottom of the bar.
Whatever I did, it wasn’t working such as adding <br> or <p>, it just looks the same. I pasted my link in the private information section.
So that page has 3 tables and if you look at where the table ends with this bar, the following text is almost next to it.
I also checked it with my other similar content pages and I can say it’s about this bar being there because of too many columns.
But if it has just right amount (the 2nd link I pasted), there’s no problem. Unless you zoomed out then the bar appears and bottom following text comes very close that bar.
I have been searching for a solution but can not find it.