Learn how to build and design websites with our tutorials.

Responsive HTML Tables Tutorial

View Tutorial Contents


Introduction to Responsive HTML Tables

This tutorial will show a few different ways on how to make HTML tables responsive using only CSS.

When making websites, you should make them responsive and that includes any HTML tables that they might contain. The problem is that HTML tables don't lend themselves to responsive design too well. This tutorial will take you through a few CSS only solutions.


Applying A Width of 100%

One solution that is not really practical is to apply the width property with a value of 100% to HTML tables.

This does make the table responsive, but when the layout is scaled down, one thing that will happen is that the web browser will start wrapping the table cells and the table will not appear like you want. Another thing that will probably happen when the a table is scaled down is that the width of the table not get any narrower and the width of the table will be larger than the width of the web browser, causing the layout to break in some way.

The code example below shows you how to make an HTML table responsive by applying the width property with a value of 100%.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>

table{
width: 100%;
border-collapse: collapse;
}
table, tr, th, td{
border: 1px solid black;
}

</style>
</head>
<body>

<table>
	<thead>
	<tr>
		<th>Heading 1</th>
		<th>Heading 2</th>
		<th>Heading 3</th>
		<th>Heading 4</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Row 1, cell 1</td>
		<td>Row 1, cell 2</td>
		<td>Row 1, cell 3</td>
		<td>Row 1, cell 4</td>
	</tr>
	<tr>
		<td>Row 2, cell 1</td>
		<td>Row 2, cell 2</td>
		<td>Row 2, cell 3</td>
		<td>Row 2, cell 4</td>
	</tr>
	</tbody>
</table>

</body>
</html> 

The code example above displays the table below. Scale the web browser down to see how the table is displayed differently as the width of both the web browser and the table are scaled down.

Heading 1 Heading 2 Heading 3 Heading 4
Row 1, cell 1 Row 1, cell 2 Row 1, cell 3 Row 1, cell 4
Row 2, cell 1 Row 2, cell 2 Row 2, cell 3 Row 2, cell 4

To see an example of how a wider HTML table is displayed when it is scaled down, Click Here.


Display Table Elements As Blocks

This is another CSS only solution to responsive HTML tables. This solution converts all table elements from their default styling of display: table-cell to display: block when the web browser is scaled down to our chosen break-point, I've chosen 800 pixels for this example.

I will also get rid of the table header (<thead>). There are two methods of doing this: one is to simply hide the header by applying the display property with the hide value to the header. The other method is to apply positioning properties to the table header so that it will moved off-screen. I've chosen to hide the header when the table is scaled down in this example

The code example below shows you how to make an HTML table responsive by converting all of the table elements to block elements.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>

table{
width: 100%;
border-collapse: collapse;
}
table caption{
margin: 5px;
padding: 0;
font-size: 1.3em;
font-family: arial, tahoma, sans-serif;
color: #000;
}
table tr:nth-of-type(odd){
background: #eee;
}
table th{
background: #333;
color: white;
font-weight: bold;
}
table td, table th{
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
@media screen and (max-width: 800px){
	table caption{
		width: 90%;
		text-align: center;
	}
	table, table thead, table tbody, table th, table td, table tr{ 
		display: block;
	}
	table thead tr{
		display: none;
	}
	table tr{
		border: 1px solid #ccc;
	}
	table td{
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50%; 
	}
	table td:last-of-type{
		border-bottom: none;
	}
	table tr:nth-child(odd) td{
		border-bottom: 1px solid #ccc;
	}
	table tr:nth-child(odd) td:last-of-type{
		border-bottom: none;
	}
	table td:before{
		position: absolute;
		top: 5px;
		left: 5px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
	table td:nth-of-type(1):before{
		content: "Car Make";
	}
	table td:nth-of-type(2):before{
		content: "Car Model";
	}
	table td:nth-of-type(3):before{
		content: "Year";
	}
}

</style>
</head>
<body>

<table>
	<caption>Our Cars</caption>
	<thead>
	<tr>
		<th>Car Make</th>
		<th>Car Model</th>
		<th>Year</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Toyota</td>
		<td>Corolla</td>
		<td>2009</td>
	</tr>
	<tr>
		<td>Honda</td>
		<td>Civic</td>
		<td>2012</td>
	</tr>
	<tr>
		<td>Ford</td>
		<td>Fusion</td>
		<td>2015</td>
	</tr>
	</tbody>
</table>

</body>
</html> 

Our Cars
Car Make Car Model Year
Toyota Corolla 2009
Honda Civic 2012
Ford Fusion 2015

Hiding HTML Table Columns

Another way to scale down HTML tables is to hide columns of table cells, both <th> and <td> tags, as the width of the screen is scaled down in size by using the :nth-child() selector to apply the display property with a value of none to them. As the browser is scaled down, the changes will be made within the @media rules.

I will also adjust the width of the table cells using percentages each time that a column is hidden.

This method isn't perfect since not all of the table data is visible nor available as the web browser and table is scaled down in size.

The code example below shows you how to hide columns of table cells, both <th> and <td> tags, as the width of the screen is scaled down.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>

table{
clear: both;
margin: 20px 0;
padding: 0;
border-collapse: collapse;
}
table tr, table td, table th{
margin: 0;
padding: .5em;
}
table th{
font-weight: bold;
color: #f5f5f5;
background: #101010;
}
table td, table th{
width: 12.5%;
border: 1px solid #000;
}
table th.no-show{ /* This will remove the borders of the first <th> tag */
border: none;
background: #fff;
}
table td:first-of-type{
font-weight: bold;
color: #101010;
background: #e0e0e0;
}
table td.bold{
font-weight: bold;
}
@media all and (max-width: 900px){
	table th:nth-child(2), table td:nth-child(2){
		display: none;
	}
	table td, table th{
		width: 14%;
	}
}
@media all and (max-width: 800px){
	table th:nth-child(3), table td:nth-child(3){
		display: none;
	}
	table td, table th{
		width: 16.5%;
	}
}
@media all and (max-width: 700px){
	table th:nth-child(4), table td:nth-child(4){
		display: none;
	}
	table td, table th{
		width: 20%;
	}
}
@media screen and (max-width: 600px){
	table th:nth-child(5), table td:nth-child(5){
		display: none;
	}
	table td, table th{
		width: 25%;
	}
}
@media screen and (max-width: 450px){
	table th:nth-child(6), table td:nth-child(6){
		display: none;
	}
	table td, table th{
		width: 33%;
	}
}

</style>
</head>
<body>

<table>
	<thead>
	<tr>
		<th class="no-show"></th>
		<th>Apples</th>
		<th>Books</th>
		<th>Cars</th>
		<th>Dogs</th>
		<th>Elephants</th>
		<th>Feathers</th>
		<th>Google</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Whole Numbers</td>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
	</tr>
	<tr>
		<td>Roman Numerals</td>
		<td>I</td>
		<td>II</td>
		<td>III</td>
		<td>IV</td>
		<td>V</td>
		<td>VI</td>
		<td>VII</td>
	</tr>
	</tbody>
</table>

</body>
</html> 

The code above will output the HTML table below.

Apples Books Cars Dogs Elephants Feathers Google
Whole Numbers 1 2 3 4 5 6 7
Roman Numerals I II III IV V VI VII

In the example above I have hide the columns in order from the 2nd nth-child to the 6th nth-child as the width web browser is scaled down, but you can hide them in any order that you want.