Make Simple HTML Table Responsive Using CSS

Make Simple HTML Table Responsive Using CSS

In this css3 tutorial, I’m going to reveal to you how to create a simple HTML table and then make it responsive by applying CSS media queries.

I will do it in few steps. First, Building a basic HTML table with a few basic CSS styling. Then, I’ll add some HTML5 attributes so one can be used to display the column’s label on smaller device sizes.

The responsive table can be quite huge, and necessarily so. A single row of information needs to be kept together to make any sense in a table.

The Tables can flex in width. However, they can simplest get so narrow earlier than they start wrapping cells contents uncomfortable or only plain can’t get any narrower.

Responsive design is all approximately adjusting design sizes according to the different screen resolution. So what happens while a display is narrower than the minimum width of a table data?

You can zoom out and see the complete table, but the text length may be too small to study. Or you could zoom into the point of readability, however, browse the table would require both vertical and (sad face) horizontal scrolling.

Pure CSS Responsive Table

We’re going to use “responsive design” standards (CSS @media queries) to discover if the display is standard then all the table shows as it is. If it’s smaller, we are going to reformat the table.

<table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
        </tr>
    </thead>
<tbody>
    <tr>
        <td>James</td>
        <td>Matman</td>
        <td>Manager</td>
    </tr>
</tbody>
</table>

The Style

Our general CSS is just simple and nothing special:

table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

The small display responsive stuff comes in now. We have already discovered our minimum table width is about 760px so we’re going to set up our media query to take impact while the narrower than that. Also, we will target iPads as they’re proper in that region.

The largest trade is that we’re going to force the table to now not behave like a table via placing each table-related detail to be block-level.

Then by way of preserving the zebra striping, we, in the beginning, brought, it is a form of like every table row will become a table in itself, but most productive as wide as the display screen.

No greater horizontal scrolling! Then for each “cell”, we’ll use CSS generated content material (:before) to use the label, so we recognize what every bit of information approach.

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "First Name"; }
	td:nth-of-type(2):before { content: "Last Name"; }
	td:nth-of-type(3):before { content: "Job Title"; }
	td:nth-of-type(4):before { content: "Favorite Color"; }
	td:nth-of-type(5):before { content: "Wars of Trek?"; }
	td:nth-of-type(6):before { content: "Porn Name"; }
	td:nth-of-type(7):before { content: "Date of Birth"; }
	td:nth-of-type(8):before { content: "Dream Vacation City"; }
	td:nth-of-type(9):before { content: "GPA"; }
	td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

That’s all. You just take that piece of code and implement. Remember that, IE 9 and older version do not such as you placing table factors as display: block; It does fantastic stuff and doesn’t paintings proper. However, IE 9 does support media queries. But you can use conditional comments for IE9.

Code ExamplesYou May Also Like