Responsive HTML Tables in CSS?

Created by josh
February 07, 2017 6:22:42 PM PST


Responsive HTML Tables in CSS?

Nowadays, as more and more sites migrate to mobile-friendlier user experiences, web developers are constantly running into questions and issues which bring up great discussions around best-practice usability. Starting a new site from scratch gives the web developer a clean slate to develop with a fresh layout. But the real problems arise when you migrate that old site to a new, fresh, upgraded look-and-feel!

 

Questions like "What style of mobile menu should we use?" and "What will the impact on traffic to key pages of the site be with an improved mobile experience?" are great discussion questions in the early development stages. My favorite topic question is:

 

"How do make our web pages mobile-friendly without sacrficing the integrity of its content and losing its message?"

 

One of the trickiest layout decisions, is what to do with those damn tables! Tables display data in a grid format, and should really never "wrap" to fit within the width constraints of a browser/device. Pretty much because it technically can't! Most content on the page (especially paragraphs) can wrap, stack and conform to fit within the boundaries of a mobile screen, but tables are tricky! Columns cannot simply wrap to conform to the page width - otherwise, columns would be completely misaligned and the data would no longer make sense.

 

Desktop-only table (before):

/* Typical table */

table {
	border: 1px solid black;
	border-spacing: 0;
	margin: 10px auto;
}
table thead {
	display: table-row-group;
}
table thead th {
	font-weight: bold;
	text-align: center;
	background: lightgray;
	border: 1px solid black;
	border-spacing: 0;
	padding: .5em 1em;
}
table tbody tr {
	border: none;
	border-spacing: 0;
	margin: 0;
}
table tbody td {
	border: 1px solid black;
	border-spacing: 0;
	padding: .5em 1em;
	text-align: left;
}

 

 

ID First Name Last Name Username
101 John Doe jdoe
109 Jane Smith jsmith
128 Lorem Ipsum lipsum

 

As you see, the table above is just a table.

 

But, now let's add some CSS below. The "mobile_label" represents the class of the span that wraps the new labels present in each cell. These spans are hidden in desktop view, but are visible at 800px screen width or less.

 

Desktop-only table (after):

/* Responsive table */

table {
	border: 1px solid black;
	border-spacing: 0;
	margin: 10px auto;
}
table thead {
	display: table-row-group;
}
table thead th {
	font-weight: bold;
	text-align: center;
	background: lightgray;
	border: 1px solid black;
	border-spacing: 0;
	padding: .5em 1em;
}
table tbody tr {
	border: none;
	border-spacing: 0;
	margin: 0;
}
table tbody td {
	border: 1px solid black;
	border-spacing: 0;
	padding: .5em 1em;
	text-align: left;
}

/* Add some new CSS here */

table tbody td .mobile_label {
	display: none;
	font-weight: bold;
}
table tbody td .mobile_label:after {
	content: ':';
}
@media screen and (max-width:800px) { /* mobile width */
	table {
		border: 0;
		margin: 0 auto 10px auto;
		width: 80%;
	}
	table tr:nth-child(odd) {
		background: lightblue;
	}
	table thead {
		display: none;
	}
	table tbody tr {
		display: block;
		border: 1px solid black;
		margin: 0 auto 10px auto;
	}
	table tbody td {
		border: none;
		display: block;
	}
	table tbody td .mobile_label {
		display: block;
	}
}

/* END new CSS */

 

 

Mobile (800px or less):

 

 

View a live demo