Responsive Tables with Minimal CSS

Last updated March 28th, 2025 at 11:57 pm

Introduction

HTML tables have been around since the beginning of the web. When I started making websites in 1994, HTML tables were our only layout tool. Fast forward 30 years, and tables are still around. They still serve a purpose, but that purpose is no longer webpage layout; thankfully, we have many better layout tools, such as Flexbox and CSS grid.

That said, tables are still one of the best tools HTML offers for presenting structured information in a matrix of rows and columns — that is, except when the user’s device is too small for the content to fit.

This article and screencast will show you how I make HTML tables mobile responsive with just 12 CSS declarations inside a media query.

I welcome your comments, including suggestions for doing this better.

Hat tip to Kevin Powell for his “How to create a responsive HTML table” video from April 2023.

Demo table at viewport width of 800px

Demo table at viewport width of 500px

HTML of some table rows

The use-label class and the data-label attribute value are instrumental in this process.

<tr>
	<td class="event">Lorem, ipsum dolor Lorem ipsum dolor sit amet consectetur..</td>
	<td class="use-label cost" data-label="Cost">$300</td>
	<td class="use-label access" data-label="Access">Public</td>
	<td class="use-label start-date" data-label="Start Date">8/15/2024</td>
	<td class="use-label end-date" data-label="End Date">9/15/2024</td>
</tr>
<tr>
	<td class="event">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam tenetur at omnis.</td>
	<td class="use-label cost" data-label="Cost">$99</td>
	<td class="use-label access" data-label="Access">Private</td>
	<td class="use-label start-date" data-label="Start Date">8/15/2024</td>
	<td class="use-label end-date" data-label="End Date">9/15/2024</td>
</tr>
<tr>
	<td class="event">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam et dolorem necessitatibus accusamus laboriosam!.</td>
	<td class="use-label cost" data-label="Cost">$130</td>
	<td class="use-label access" data-label="Access">Public</td>
	<td class="use-label start-date" data-label="Start Date">8/15/2024</td>
	<td class="use-label end-date" data-label="End Date">9/15/2024</td>
</tr>
<tr>
	<td class="event">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam et dolorem necessitatibus accusamus laboriosam!.</td>
	<td class="use-label cost" data-label="Cost">$45</td>
	<td class="use-label access" data-label="Access">Public</td>
	<td class="use-label start-date" data-label="Start Date">8/15/2024</td>
	<td class="use-label end-date" data-label="End Date">9/15/2024</td>
</tr>

General CSS for table

table {
	margin-inline: auto;
	width: auto;
	border-collapse: collapse;
}
th,
td {
	border: 1px solid #333;
	padding-inline: 0.5rem;
}

The CSS for screen width under 500px — the responsive stuff

Note that only the highlighted lines are required. All others govern optional presentation styles. In other words, only 5 lines of CSS declarations (and some specific HTML markup) are needed to make a table responsive.

@media (max-width: 500px) {
	td,
	tr {
		display: block;
		border: none;
	}
	tr {
		border-bottom: 1px solid #999;
		padding-bottom: 0.5rem;
	}
	thead {
		display: none;
	}
	td.event {
		font-weight: bold;
		margin-block: 1rem 0.5rem;
	}

	td.use-label::before {
		content: attr(data-label) ": ";
		font-style: italic;
		color: darkgreen;
	}
	td.use-label {
		display: grid;
		grid-template-columns: 15ch 1fr;
	}
}