Re:Styling Tables the Modern CSS Way
by timbowhite on Wednesday July 24, 2024 @10:29AM
(#41057471)
A solution I've used is to limit the number of table rows displayed to fit vertically within the browser viewport. This way the horizontal scrollbar at the bottom of the table is always visible without having to scroll vertically.
This does require:
0. Pagination.
1. Each table row must have the same height.
2. Use of javascript to calculate the max number of rows that will fit vertically in the viewport (and don't forget to include the height of the table header and pagination buttons in the calculation).
3. Send ajax request with row limit to server to retrieve and render the data.
You can see an example here: https://wee.domains
Not that's its a commonly used but can't you middle mouse click and scroll around? And shift or alt (which I have actually forgotten) mouse wheel as well.
Those do work, but I don't think most people know about them. Also, I think the middle mouse click scrolling ("autoscrolling") is disabled by default in firefox, potentially in chrome too.
Re:Styling Tables the Modern CSS Way
by WorldMaker on Wednesday July 24, 2024 @12:15PM
(#41058574)
It doesn't appear to be disabled by default in Firefox on Windows for me, I use it all the time.
You are correct though, that a lot of users never discover it.
Re:Styling Tables the Modern CSS Way
by loopback_device on Wednesday July 24, 2024 @11:36AM
(#41058146)
On Windows you can Shift+Scroll to scroll horizontally, so getting the scrollbar into the viewport is not necessary (if it's obvious that the container scrolls that way).
(Trackpad users can use a gesture instead.)
The closest I've come to a solution is using JavaScript to try and mirror the bottom scrollbar at the top of the table as well, but it's pretty cludgy and hard to implement well.