How to create a stretchable table - ita-social-projects/OoS-Frontend GitHub Wiki
To add stretch functionality, you need to add a appStretchTable directive to the <table>
tag
After adding the directive, a border appears on the columns on hover. When clamping the border, you can change the size of the column.
- The last column in the table
- The column has a stickyEnd directive
- The column is before the column with the stickyEnd directive
By default, the width of the table is divided equally between the columns.
If we need to set an initial width for some table, this can be done by adding the width style to the <th>
tag.
This column will be set to the specified width, and the remainder of the width will be distributed among the remaining columns.
- Columns cannot be reduced if the total width of the columns is less than the width of the table container
- Changing the width of a column does not affect the width of adjacent columns.
- Column cannot be reduced less than 50px
- When the total width of the columns becomes greater than the width of the table container, a scrollbar appears at the bottom