I might have some faulty premise here but I have installed the Drupal CMS (10.3) and created a webpage with and put an HTML table of about five columns in it and filled it with decent amount of text (say 5-25 characters per column).
My problem is that any such webpage containing an HTML table with about five columns, contains an horizontal scrolling problem in mobile display.
I didn’t customize Drupal’s table CSS in any way to cause this and Drupal is quite of a reliable and common CMS so this is probably the natural behavior of HTML tables.
Can HTML tables of about five columns or more be responsive or will there always be a horizontal scrolling for webpages containing such HTML tables in mobile displays?
There is a method for doing this I learnt from @PaulOB it involves turning the table rows into blocks, so you end up with a single column with the data for each row in its own block.
I will have to dig around to find a post about it. It does require a data attribute that corresponds to the column headers to display, but it works.
If your table is creating scrollbars, it has too much data to display, or the css being used is bad (min-widths, etc).
But here is a quick/dirty example of what @SamA74 was talking about. It’s a full width, five column table, but shrink the window and it switches to a single column layout using flex.
You could probably do it with a container query instead of using a hard line media query but those hurt my head for some reason even though the concept isn’t that far off.
Of course, another option is to leave the table as is, let it be as wide as it needs to be, and put it inside a container that allows for horizontal overflow, so the user can scroll through the table. Then you preserve the logic of the table and it’s much easier to read (IMO).
if (document.querySelector('table') ) {
(function() {
// Select all tables on the page
const tables = document.querySelectorAll('table');
tables.forEach(table => {
// Create a wrapper div around each table
const wrapper = document.createElement('div');
wrapper.style.overflowX = 'auto'; // Enable horizontal scrolling when needed
wrapper.style.width = '100%'; // Ensure the wrapper takes the full width of its parent
table.parentNode.insertBefore(wrapper, table); // Insert the wrapper before the table
wrapper.appendChild(table); // Move the table inside the wrapper
});
})();
}
I have tested this code in Windows 11 Home with Chrome browser (mobile mode) and in Android with both Chrome and Via browsers and the result seems to me pretty much okay but my only problem is that in very long tables (height), the horizontal scrolling bar is only available in the far bottom end of the table, so the user could interact with this horizontal scrolling bar only if that user will manually scroll down thoroughly.
Dear PaulOB, what do you think about a “radically” different approach of adding some small grey-background text message in the top part of the table with a text like “Horizontal scrolling might be needed to read all columns”?
That’s not much of a problem on desktop but on a mobile an element that pushes wide will upset the whole page in that when you scroll vertically the page will wobble from side to side and is very disconcerting to say the least.
The simplest answer is to use a wrapper as you were going to do but as I mentioned also setting a max height on the wrapper so that you don’t have to scroll miles before you can scroll sideways. (Note than on a mobile you scroll sideways by swiping and don’t need to travel down to the end. )
In the end it’s your choice to find a compromise you are happy to live with.
Yes, HTML tables with multiple columns can definitely be made responsive! While large tables might cause horizontal scrolling on mobile devices by default, you can easily fix this with a little CSS. Using media queries, you can make the table scrollable or even stack the data vertically on smaller screens. I’ve also seen frameworks like Bootstrap do a great job with responsive tables out-of-the-box. So, no need to worry about messing up your mobile layout – a few tweaks, and you’re good to go!
