I manually created a table using containers, columns, and rows, making it horizontally scrollable. My idea is for the table to occupy the entire horizontal space of the page and, starting from a minimum width (1000px), to begin horizontally scrolling its content to the right.
I managed to make it work perfectly within a component by setting the width of the table's parent container to 100% and the rows with a minimum width of 1000. However, when I add this component to a page, regardless of the screen width, the table presents a horizontal scroll.
The table model I want to reproduce is similar to this example: https://demo.pump.co/. Just reduce the width of the page to understand the behavior of the table on that page.
What intrigues me is that within the component, the behavior is perfect. Furthermore, I tried to build the table within the page itself, but the same behavior persists. Upon adding horizontal scroll to the table, regardless of the content size, the table exceeds the width of the page, resulting in horizontal scrolling.
I recorded a video demonstrating the test within the component and another within the page.
https://www.loom.com/share/d6c1f9e3813f4da5956f82155ed02ca5?sid=31ae13c8-2c03-4770-892c-163822580b07