In web development, tables are the bad party guest we just can’t make leave.

Indispensable to the very earliest days of web design – before CSS existed, tables  were the only method of laying out pages – they became annoying, then momentarily tolerable (as new methods were added to make them more accessible), and now downright obnoxious.

The central issue is that tables do not wrap or reorient themselves in response to changing viewport sizes. Tables can be dimensioned using percentages, but they will only collapse as far as their inner content will allow them to. If the table consists of multiple columns, sentences inside of cells are inevitably forced into long, thin, almost unreadable vertical lines of text, or are simply cut off.

There have been many suggestions as to how to make tables more responsive, none of them perfect. For the forseeable future, the issue will likely have to be dealt with on a case-by-case basis; what follows are a few strategies that you can add to your responsive toolkit.

Making A Responsive Table

As a text case, let’s use a table that shows the history of Digital Rights Management technologies. The markup for the table is:

<table class="respondus">
	<caption>Digital Rights Management Technologies: A History of Failure</caption>
	<tr>
		<th>Medium
		<th>Scheme
		<th class="hide"><span>Year</span> Implemented
		<th><span>Year</span> Cracked
		<th>Method
	<tr>
		<td>CD Audio
		<td>Key2Audio
		<td class="hide">2002
		<td>2002
		<td>Felt-tip marker
		…
</table>

Responsive Options

With the hooks of classes and span elements in the table structure, we have gained a few more options as the browser narrows:

1. At moderate screen widths, suck the air out of the table.

   Reduce table cell padding, font-size and border-spacing with @media queries to make the table fit on smaller screens. Consider adding hyphenation to break words across lines more frequently. Add zebra striping (if necessary) to retain legibility.

   @media screen and (max-width: 600px) {
   	table.respondus {
   		border-spacing: 0;
   	}
   	table.respondus td, table.respondus th {
   	 	padding: 0.5rem;
   	 	font-size: 1rem;
   	 }
   }

2. To gain more space, eliminate unnecessary words.

   The word “Year” in the table header cells might be considered supplementary at smaller screen sizes. As they are surrounded with <span> tags, we can make those words disappear as the screen gets smaller to save even more space:

   @media screen and (max-width: 550px) {
   	table.respondus th span { display: none; }
   }

3. At mobile screen sizes, hide table columns if you absolutely must.

   Less practical, but sometimes necessary, you can set a column of table data to disappear at smaller viewport widths. Very much a last-ditch recourse, as it leads one to naturally question if the data was truly required in the first place, and why we are denying it to mobile users.

   @media screen and (max-width: 500px) {
   	table.respondus .hide {
   		display: none;
   	}
   }

   Alternatively, use the :last-child selector to eliminate the last column from the end of the table, removing the need for any classes:

   @media screen and (max-width: 600px) {
   	table.respondus tr td:last-child {
   		display: none;
   	}
   	table.respondus tr th:last-child {
   		display: none;
   	}
   }

   To hide more than one column with this method, use nth-child instead:

   @media screen and (max-width: 500px) {
   	table.respondus tr td:nth-child(n+3) {
   		display: none;
   	}
   	table.respondus tr th:nth-child(n+3) {
   		display: none;
   	}
   }

   The CSS above will preserve the first three columns of the table at small screen sizes, while removing the others.

4. Go mobile-first. Make a semantically-appropriate structure appear table-like under certain conditions, collapsing back to the natural display format on smaller devices. This is a more complex solution, and one that needs to be addressed in its own article.

Photograph by Eric Allix under a Attribution-NonCommercial-ShareAlike 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.