Responsive Tables with CSS

Posted on September 6, 2014 by Dan Doicaru in HTML/CSS Category

In this article I will explain you how to create responsive tables, using CSS only with @media queries. The trick is very simple and easy to use in every page, but there will be few problems with tabular data and I will explain why.

Responsive Tables without Tabular Data

First example will contain a basic table without tabular data. That means your table will start from left to right. For example, think about a pricing table where someone is offering something by membership. The membership title will start from left (row 1) to right (the same row 1). Check the example image below:

Responsive Tables Without Tabular Data

The example above is a table without tabular data which is easier to become a responsive table, because each row has his own data.

Writing the HTML

This table will have a simple HTML structure with row and same cell numbers. In this way you can use the responsive tables technique easy and without any problem.

<table border="0" cellpadding="0" cellspacing="1">
	<tr>
		<td class="redCell">Starter Pack</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>Starter</td>
		<td>Starter</td>
		<td class="priceCell">$9,99</td>
	</tr>

	<tr>
		<td class="redCell">Normal Pack</td>
		<td>x</td>
		<td>x</td>
		<td>Normal</td>
		<td>Normal</td>
		<td>Normal</td>
		<td>Normal</td>
		<td class="priceCell">$14,99</td>
	</tr>

	<tr>
		<td class="redCell">Advanced Pack</td>
		<td>Advanced</td>
		<td>Advanced</td>
		<td>Advanced</td>
		<td>Advanced</td>
		<td>Advanced</td>
		<td>Advanced</td>
		<td class="priceCell">$29,99</td>
	</tr>
</table>

Writing the CSS

The CSS below will contain styles for the table as it is in the image above and styles for responsive part. Check the live demo with responsive tables without tabular data to make an idea how it's looking.

body {
	margin: 20px;
	padding: 0;
	font-family: Arial, sans-serif;
	font-size: 12pt;
	line-height: 150%;
}
td {
	padding: 10px;
	background: #eee;
	text-align: center;
}
.redCell {
	background: #F7617F;
	color: #FFF;
	font-weight: bold;

}
.priceCell {
	font-weight: bold;
	color: #FFF;
	background: #5F8CFF;
}

@media (max-width: 768px) {
	table {
		display: block;
		width: 100% !important;
		height: auto !important;
	}
	tbody {
		display: block;
		width: 100% !important;
		max-width: 100%;
		height: auto !important;
	}
	tr {
		display: block;
		width: 100% !important;
		height: auto !important;
		margin-bottom: 50px;
	}
	td {
		padding: 10px 0;
		display: block;
		width: 100% !important;
		height: auto !important;
	}
}

Responsive Tables with Tabular Data

Now let me show you an example of responsive tables with tabular data. This type of tables will not appear correctly in mobile.

Responsive Tables With Tabular Data

The HTML for this table is almost the same, we will only add another table row above the others. Check it below:

<tr class="titlesRow">
	<td class="hidden"></td>
	<td>Col Title</td>
	<td>Col Title</td>
	<td>Col Title</td>
	<td>Col Title</td>
	<td>Col Title</td>
	<td>Col Title</td>
	<td>Price</td>
</tr>

This row with column description titles will not keep the position above every column in mobile view and instead all the row will contain only these titles.

Responsive Tables Tabular Data On Mobile

If you want a quick fix, you can add a class to this row and use it to hide it on mobile. Below is the extra CSS used. You can also check this live demo of responsive tables with tabular data.

.titlesRow td {
	background: #777;
	color: #FFF;
	font-weight: bold;
}
.titlesRow .hidden {
	background: none;
}


@media (max-width: 768px) {
	.titlesRow {
		display: none;
	}
}

Conclusion

In order to have responsive tables you must create them with some minor changes and add some classes to help you hide what you don't need on mobile. You are free to download the files and study them.

Download Files

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4.00 out of 5)
Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


6 + 8 =

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.