View the generated code The rendered table demonstrates that when scrolling past the maximum width, the data does not appear
<div>
<table (not going to display all the markup for this. this table contains the headers of each column and appears when scrolled beyond the max width)>
</div>
<div styel="height: inherit; overflow-x:hidden; overflow-y: auto;">
<table (not showing complete markup. it holds rows of data that are not visible beyond the max width)>
</div>After rendering the code in image 1, scrolling towards the right prevents the appearance of data extending beyond the max width.
The headers of the table do show up as expected. A closer examination revealed an issue with a div tag.
Upon inspecting the page (HTML snippet above), I discovered that the header of the table is enclosed within a div tag, while the body of the table is within another div tag.
The div wrapping the body includes styles such as overflow-:x hidden and overflow-y: auto (the header's div has no styling).
By removing both overflow settings, the table displays correctly. However, as I did not write these div tags myself, I suspect they were added by material UI. How can I modify or remove these tags? Is there a workaround?