9.1 Scrolling
Tables are often used to display structured data, but they can be tricky to show on small-screen devices. Responsive tables help improve data perception and interaction across various devices, including phones and tablets. Let's check out some techniques for creating responsive tables.
One of the simplest ways to make responsive tables is by adding horizontal scrolling. This keeps the table structure intact and allows users to scroll data horizontally on narrow screens.
Example:
CSS
.table-container {
overflow-x: auto;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table with Scrolling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<!-- Other rows -->
</tbody>
</table>
</div>
</body>
</html>
Code Explanation:
.table-container: adds horizontal scrolling if the table exceeds the container's widthtable: sets the table width to 100% and collapses cell borders
9.2 Column Hiding
This method involves hiding less important columns on narrow screens so the key data remains visible. You can do this with media queries.
Example:
CSS
@media (max-width: 600px) {
.hide {
display: none;
}
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table with Column Hiding</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th class="hide">Column 3</th>
<th class="hide">Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td class="hide">Data 3</td>
<td class="hide">Data 4</td>
</tr>
<!-- Other rows -->
</tbody>
</table>
</body>
</html>
Code Explanation:
.hide: hides specific columns on screens narrower than 600px using media queriestable: sets the table width to 100% and collapses cell borders
9.3 Stacking
Stacking transforms table rows into blocks displayed one below the other on narrow screens, making the table more readable on mobile devices.
Example:
CSS
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
td {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
td::before {
content: attr(data-label);
font-weight: bold;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table with Stacking</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Column 1">Data 1</td>
<td data-label="Column 2">Data 2</td>
<td data-label="Column 3">Data 3</td>
<td data-label="Column 4">Data 4</td>
</tr>
<!-- Other rows -->
</tbody>
</table>
</body>
</html>
Code Explanation:
- Media Queries: transform the table into block elements on screens narrower than 600px
td::before: adds a pseudo-element with the column name before each cell's value to preserve data context
9.4 Transforming into Cards
This method involves turning each table row into a separate card on narrow screens, improving data readability on mobile devices.
Example:
CSS
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
tr {
margin-bottom: 10px;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
td {
display: flex;
justify-content: space-between;
padding: 10px 0;
border: none;
}
td::before {
content: attr(data-label);
font-weight: bold;
margin-right: 10px;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table with Cards</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Column 1">Data 1</td>
<td data-label="Column 2">Data 2</td>
<td data-label="Column 3">Data 3</td>
<td data-label="Column 4">Data 4</td>
</tr>
<!-- Other rows -->
</tbody>
</table>
</body>
</html>
Code Explanation:
- Media Queries: transform the table into block elements and create cards on screens narrower than 600px
td::before: adds a pseudo-element with the column name before each cell's value to preserve data context
9.5 Using CSS Frameworks
Many CSS frameworks, like Bootstrap, offer built-in solutions for creating responsive tables. Using such frameworks simplifies the process and provides ready-made styles and components.
Example using Bootstrap:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table with Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<!-- Other rows -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Code Explanation:
table.table-responsive: a Bootstrap class that adds horizontal scrolling for tables on narrow screenscontainer: a Bootstrap class for centering and setting a maximum width for the container
GO TO FULL VERSION