View video tutorial
CSS Responsive Table
CSS
A responsive table will display a horizontal scroll bar if the screen is too small to display the entire content.
CSS Responsive Table.
Method 1: Horizontal scrolling (recommended for data tables)
➔ To create a responsive table, add a container element with overflow-x:auto around the table.
➔ If the screen is too small to contain the entire content, a horizontal scroll bar will appear.
➔ Resize the browser window to see the effect.
<div style="overflow-x: auto;">
<table>
<!-- table content -->
</table>
</div>
<style>
.container {
overflow-x: auto;
}
</style>
<div class="container">
<table>
<!-- table content -->
</table>
</div>Syntax
.container { overflow-x: auto; }
CSS overflow-x property
overflow-x: visible|hidden|scroll|auto|initial|inherit;
| Value | Description |
|---|---|
| visible | Content is not clipped and can be rendered outside the element's box. |
| hidden | The content is clipped to the horizontal edge and scrollbars are not provided. |
| scroll | The content is clipped and a horizontal scrollbar is always displayed, even if the content fits. |
| auto | A horizontal scrollbar will only appear when the content actually overflows. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Example (Responsive Table Method-1)
<!DOCTYPE html>
<html>
<head>
<title>CSS Responsive Table Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
text-align: left;
}
td {
border: 1px solid #d5d5d5;
padding: 2px;
text-align: left;
}
tr:nth-child(even) {
background-color: #efefef;
}
tr:hover {
background-color: #ddd;
}
caption {
font-weight: bold;
margin: 10px;
}
th,
tr {
height: 25px;
}
.container {
margin: auto;
width: 80%;
height: 350px;
overflow-x: auto;
}
</style>
</head>
<body>
<h3>CSS Responsive Table Example</h3>
<p>Note: Resize the browser window to see the effect.</p>
<div class="container">
<table>
<caption>Student Information Table</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Elias</td>
<td>Fischer</td>
<td>Male</td>
<td></td>
<td>Austria</td>
</tr>
<tr>
<td>Maria</td>
<td>Petrov</td>
<td>Female</td>
<td></td>
<td>Bulgaria</td>
</tr>
<tr>
<td>Wang</td>
<td>Zihan</td>
<td>Male</td>
<td></td>
<td>China</td>
</tr>
<tr>
<td>Amelia</td>
<td>Novak</td>
<td>Female</td>
<td></td>
<td>Czech Republic</td>
</tr>
<tr>
<td>Lucas</td>
<td>Martin</td>
<td>Male</td>
<td></td>
<td>France</td>
</tr>
<tr>
<td>Alexander</td>
<td>Müller</td>
<td>Male</td>
<td></td>
<td>Germany</td>
</tr>
<tr>
<td>Viktor</td>
<td>Orbán</td>
<td>Male</td>
<td></td>
<td>Hungary</td>
</tr>
<tr>
<td>Aarush</td>
<td>Agarwal</td>
<td>Male</td>
<td></td>
<td>India</td>
</tr>
<tr>
<td>Isabella</td>
<td>Murphy</td>
<td>Female</td>
<td></td>
<td>Ireland</td>
</tr>
<tr>
<td>Sara</td>
<td>Meloni</td>
<td>Female</td>
<td></td>
<td>Italy</td>
</tr>
<tr>
<td>Maya</td>
<td>Mizrahi</td>
<td>Female</td>
<td></td>
<td>Israel</td>
</tr>
<tr>
<td>Sato</td>
<td>Haru</td>
<td>Male</td>
<td></td>
<td>Japan</td>
</tr>
<tr>
<td>Liam</td>
<td>Hansen</td>
<td>Male</td>
<td></td>
<td>Norway</td>
</tr>
<tr>
<td>Daniel</td>
<td>Kowalski</td>
<td>Male</td>
<td></td>
<td>Poland</td>
</tr>
<tr>
<td>Emma</td>
<td>Silva</td>
<td>Female</td>
<td></td>
<td>Portugal</td>
</tr>
<tr>
<td>Mark</td>
<td>Volkov</td>
<td>Male</td>
<td></td>
<td>Russia</td>
</tr>
<tr>
<td>Jasmina</td>
<td>Horák</td>
<td>Female</td>
<td></td>
<td>Slovakia</td>
</tr>
<tr>
<td>Matteo</td>
<td>García</td>
<td>Male</td>
<td></td>
<td>Spain</td>
</tr>
<tr>
<td>Hanna</td>
<td>Johansson</td>
<td>Female</td>
<td></td>
<td>Sweden</td>
</tr>
<tr>
<td>Noah</td>
<td>Schneider</td>
<td>Male</td>
<td></td>
<td>Switzerland</td>
</tr>
<tr>
<td>David</td>
<td>Smith</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>James</td>
<td>Smith</td>
<td>Male</td>
<td></td>
<td>US</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Method 2: Card/Stacked View (Recommended for Smaller Tables)
➔ This method restacks the table contents on smaller screens, effectively converting each row into a vertical "card" layout.
➔ This makes it easier to read data in narrow viewports.
Example (Responsive Table Method-2)
<!DOCTYPE html>
<html>
<head>
<title>CSS Responsive Table Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
/* General table styling (Default view) */
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
text-align: left;
}
td {
border: 1px solid #d5d5d5;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #efefef;
}
tr:hover {
background-color: #ddd;
}
caption {
font-size: 15pt;
font-weight: bold;
margin: 10px;
}
/* Mobile view for upto 600px */
@media screen and (max-width: 600px) {
table,
thead,
tbody,
th,
td,
tr {
display: block;
/* All table elements behave as blocks. */
}
thead tr {
display: none;
/* Hide the table header */
}
tr {
border: 1px solid #000;
margin-bottom: 10px;
}
td {
text-align: left;
padding-left: 10%;
}
tr:hover {
background-color: #107080;
color: #fff;
}
}
</style>
</head>
<body>
<h3>CSS Responsive Table Example</h3>
<p>Note: Resize the browser window to see the effect.</p>
<table>
<caption>Student Information Table</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lucas</td>
<td>Martin</td>
<td>Male</td>
<td></td>
<td>France</td>
</tr>
<tr>
<td>Alexander</td>
<td>Müller</td>
<td>Male</td>
<td></td>
<td>Germany</td>
</tr>
<tr>
<td>Aarush</td>
<td>Agarwal</td>
<td>Male</td>
<td></td>
<td>India</td>
</tr>
<tr>
<td>Sara</td>
<td>Meloni</td>
<td>Female</td>
<td></td>
<td>Italy</td>
</tr>
<tr>
<td>Maya</td>
<td>Mizrahi</td>
<td>Female</td>
<td></td>
<td>Israel</td>
</tr>
<tr>
<td>Sato</td>
<td>Haru</td>
<td>Male</td>
<td></td>
<td>Japan</td>
</tr>
<tr>
<td>Liam</td>
<td>Hansen</td>
<td>Male</td>
<td></td>
<td>Norway</td>
</tr>
<tr>
<td>Mark</td>
<td>Volkov</td>
<td>Male</td>
<td></td>
<td>Russia</td>
</tr>
<tr>
<td>David</td>
<td>Smith</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>James</td>
<td>Smith</td>
<td>Male</td>
<td></td>
<td>US</td>
</tr>
</tbody>
</table>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.