Diolix
KPCKevin Powell - Community
•Created by Diolix on 2/19/2025 in #front-end
Scrolling bar in a <Table> with "responsive" columns
I'm trying to design a table with a scroll bar.
The problem is that the columns don't adjust according to the information contained in the scrollbar. All the columns keep the same proportion because of the scrollbar located in <tbody>.
I therefore used Typescript code to modify the width of each column according to its content. It works fine, but the alignment of columns and values is not good. What's more, the scroll bar is inside the last column and alters the style of the buttons contained in the cells.
I don't know how to make the columns proportional and aligned according to the values, so that the style of the buttons isn't altered and the scroll bar is more outwards.
You can find the code on GitHub in the link "Click here".
And on Stackblitz "Click here"
Thanks for your help
80 replies