[Go Make Things] Responsive tables

Friday, January 31, 2025

One of the long-standing challenges of responsive web design has been how to handle data tables responsively. Today, we're going to look at the two ways I generally tend to handle this.

Let's dig in!

A wide table

Let's imagine you have a data table with a lot of columns.

<table class="table-striped">  	<thead>  		<tr>  			<th scope="col">First Name</th>  			<th scope="col">Last Name</th>  			<th scope="col">Tools</th>  			<th scope="col">Spells</th>  		</tr>  	</thead>  	<tbody>  		<tr>  			<td>Merlin</td>  			<td>the Enchanter</td>  			<td>Spellbook, Wand, Robes</td>  			<td>Dancing Teacups, Disappear, Transform into Animals</td>  		</tr>  		<!-- ... -->  	</tbody>  </table>

On a big desktop viewport, it might fit just fine. And as the viewport gets narrower, you can wrap some of the words onto the next line and so on.

But at a certain point, the table becomes unreadable.

It might overflow outside the container, causing a horizontal scroll or hiding that content entirely. Or it might start breaking words up into just one or two letters per line.

Either way, it's a bad user experience. Let's look at two different options for fixing this.

Option 1. Horizontal scroll (on purpose)

An unexpected horizontal scroll results in weird styling. Usually the whole page shifts, not just the table, and the navbar can behave oddly.

But if you do it on purpose, the user experience can be pretty good.

For this approach, add a utility class for .scroll-horizontal…

.scroll-horizontal {  	display: block;  	overflow-x: auto;  }

Then, wrap your table in it.

<div class="scroll-horizontal">  	<table class="table-striped">  		<thead>  			<tr>  				<th scope="col">First Name</th>  				<th scope="col">Last Name</th>  				<th scope="col">Tools</th>  				<th scope="col">Spells</th>  			</tr>  		</thead>  		<tbody>  			<tr>  				<td>Merlin</td>  				<td>the Enchanter</td>  				<td>Spellbook, Wand, Robes</td>  				<td>Dancing Teacups, Disappear, Transform into Animals</td>  			</tr>  			<!-- ... -->  		</tbody>  	</table>  </div>

Here's a demo…

This works best when you have a table doesn't require a lot of cross-referencing between the early columns and the latter ones.

If, for example, a user needs to keep scrolling back to see the name of the wizard they're looking at, that can create a pretty bad user experience.

Option 2: Shift to a vertical table

For bigger tables, and tables with lots of cross-referencing between columns, I prefer to shift the layout to something different altogether.

With this approach, you stack everything vertically, and the heading text is repeated next to each corresponding column for easier reference.

I learned how to do this from Adrian Roselli. I've seen some articles use div elements and flexbox for this, but there are tons of accessibility concerns around that approach.

Adrian wrote a nice little JavaScript snippet to automate it, and I've converted it into a Web Component.

<responsive-table>  	<table class="table-striped">  		<thead>  			<tr>  				<th scope="col">First Name</th>  				<th scope="col">Last Name</th>  				<th scope="col">Tools</th>  				<th scope="col">Spells</th>  			</tr>  		</thead>  		<tbody>  			<tr>  				<td>Merlin</td>  				<td>the Enchanter</td>  				<td>Spellbook, Wand, Robes</td>  				<td>Dancing Teacups, Disappear, Transform into Animals</td>  			</tr>  			<!-- ... -->  		</tbody>  	</table>  </responsive-table>

Here's a demo.

The JavaScript to go with this adds some required ARIA to make this work accessibly, and dynamically generates CSS that displays the heading text before each column while preserving table semantics.

I've also added this to my members toolkit.

Other approaches?

I've seen people address this by offering the option to hide certain columns, or pin some columns so that when you scroll, they're always there.

This can work in certain contexts, too, but other times can result in a lot of toggling for users to see the stuff they care about.

That doesn't meant you shouldn't use them, but it's just something to keep in mind.

Like this? A Go Make Things membership is the best way to support my work and help me create more free content.

Cheers,
Chris

Want to share this with others or read it later? View it in a browser.

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Ad/iklan :