Responsive Web Design for Table Layouts?

HTML & CSS
10

Ignoring the question of why someone is still using tables for layout in this day and age there are still some things you can do to make an html table structure responsive as you can still change the display of these elements for smaller devices.

Here’s a simple example:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
table { width:100%; }
td {
	border:1px solid #000;
	background:#d9d9d9
}
@media screen and (max-width: 560px) {
table, tr, td, thead, tbody {
	display:block;
	text-align:center;
}
td {
	border:none;
	border-bottom:1px solid #000;
}
}
</style>
</head>

<body>
<table>
		<tr>
				<td>lorem </td>
				<td>ipsum</td>
				<td>dolor</td>
				<td>sit</td>
				<td>lorem </td>
				<td>ipsum</td>
				<td>dolor</td>
				<td>sit</td>
		</tr>
		<tr>
				<td>amet.</td>
				<td>lorem</td>
				<td>ipsum</td>
				<td>dolor</td>
				<td>lorem </td>
				<td>ipsum</td>
				<td>dolor</td>
				<td>sit</td>
		</tr>
</table>
</body>
</html>

Of course for more complicated structures it’s not quite so easy but there are often things you can change to make it better.

In the end though its best to design with responsive design in mind from the start rather than as an afterthought because you are limited by the structure before you. If you design with responsive in mind you can build in the responsiveness as you go. :slight_smile:

Responsive HTML table