Create a Responsive table using HTML and CSS
In this tutorial, we will create a responsive table with a 3 column layout that transforms into rows with a label for each item when the screen is small. We will use HTML and CSS to create the table.
Prerequisites
To follow along with this tutorial, you will need:
- A text editor.
- Basic knowledge of HTML and CSS.
Our table will look like this:
and on smaller screens it will look like this:
Setting up the Project
First, let's create an HTML file and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Item">Item 1</td>
<td data-label="Description">Description 1</td>
<td data-label="Price">$10</td>
</tr>
<tr>
<td data-label="Item">Item 2</td>
<td data-label="Description">Description 2</td>
<td data-label="Price">$20</td>
</tr>
<tr>
<td data-label="Item">Item 3</td>
<td data-label="Description">Description 3</td>
<td data-label="Price">$30</td>
</tr>
</tbody>
</table>
</body>
</html>
In the above code, we have created an HTML file with a table element. The table element contains a thead element with a row of headers and a tbody element with three rows of data. Each row of data has three columns: Item, Description, and Price. We have also added a meta tag to set the viewport width to the device width and linked a CSS file named style.css.
Next, let's create the CSS file named style.css and add the following code:
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;
}
/* Responsive Table */
@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: "Item";
}
td:nth-of-type(2):before {
content: "Description";
}
td:nth-of-type(3):before {
content: "Price";
}
}
In the above code, we have styled the table, th, and td elements. We have also added a ::before pseudo-element to the td element to display the label for each item. We have used media queries to change the layout of the table when the screen is small.
Summary
In this tutorial, we covered how to create a responsive table with a 3 column layout that transforms into rows with a label for each item when the screen is small. We hope this tutorial was helpful in understanding how to create a responsive table using HTML and CSS.