CSS only scrollable table body

by PDG

Head 1 Head 2 Head 3 Head 4
1 First row 3 4
1 2 A very long cell content comes here, just to test it all!!! 4
1 2 3
1 2 3 There is an empty cell above!
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 Last row

Notes

The table uses flex properties to arrange the cell sizes, however, this tends to make them the same as “fixed width”. To fix that, you need to create additional classes that target the td:nth-child() and th:nth-child() with a specific flex-basis property.

The height of the body also must be fixed and cannot be percentages (in the example above I use “vh”)

Join Meetings