how to enable horizontal scrolling for a div wrapping a table with many columns
What I hope to achieve:
a table within a container surrounded by padding but scrollable horizontally and vertically
What I have done
created a table that is vertically scrollable, with frozen row headings.
What problems I am facing
- inability to pad the table container on the right
- the horizontal scrolling is displayed but doesn't work
- part of the content of the table is hidden.
techonologies
- html
- talwind
URL to code pen with code
https://codepen.io/davidshare/pen/poXPxQW
URL to github gist
https://gist.github.com/davidshare/f714a4df728a4cbfe6afbd31d99bbb82
1 Reply
On your main content wrapper, try adding
w-full and replacing md:ml-64 with md:pl-64
As you hadn't set a width on this container it was just stretching out as far as it needed according to it's contents. That meant that the table container wasn't aware that it needed any horizontal scroll as it fit within the bounds of it's parent.
By setting the 100% width on the main parent container, it is being limited to the viewport width, therefore creating overflow on the table.
On top of that, by giving it a margin-left of 16rem (ml-64) you had pushed the whole wrapper over to the right. By changing that to padding-left the wrapper stays within the viewport but pushes it's contents to the right.