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’ll do it in a few steps. First, building a basic HTML table with a few basic CSS styles. 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 resolutions. 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>
CSS Styles for Table
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.
The following CSS styles make an HTML table responsive.
@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: "Servie 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 it. Remember that, IE 9 and older versions 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.