Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a responsive table with CSS?
Creating a responsive table with CSS ensures that your table displays properly on all screen sizes. The key technique is using horizontal scrolling when the table becomes too wide for smaller screens.
Syntax
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
Example
The following example creates a responsive table that scrolls horizontally on smaller screens −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.table-container {
overflow-x: auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
min-width: 600px;
}
th, td {
text-align: left;
padding: 12px;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h1>Responsive Table Example</h1>
<div class="table-container">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Math</th>
<th>Science</th>
<th>English</th>
<th>History</th>
<th>Geography</th>
<th>Physics</th>
<th>Chemistry</th>
<th>Biology</th>
</tr>
<tr>
<td>Jack</td>
<td>Roy</td>
<td>85</td>
<td>92</td>
<td>78</td>
<td>88</td>
<td>91</td>
<td>87</td>
<td>83</td>
<td>89</td>
</tr>
<tr>
<td>Evelyn</td>
<td>Monroe</td>
<td>76</td>
<td>84</td>
<td>92</td>
<td>79</td>
<td>85</td>
<td>88</td>
<td>91</td>
<td>86</td>
</tr>
<tr>
<td>Joe</td>
<td>Anderson</td>
<td>94</td>
<td>87</td>
<td>89</td>
<td>93</td>
<td>82</td>
<td>95</td>
<td>88</td>
<td>90</td>
</tr>
</table>
</div>
</body>
</html>
A responsive table with student grades is displayed. On larger screens, the table shows all columns. On smaller screens, a horizontal scrollbar appears allowing users to scroll through the table content while keeping the table structure intact.
Key Features
- overflow-x: auto − Adds horizontal scrollbar when needed
- min-width − Prevents table from becoming too compressed
- border-collapse − Creates clean table borders
- hover effects − Improves user experience
Conclusion
Responsive tables use horizontal scrolling to maintain readability on small screens. The overflow-x: auto property is the key to creating tables that work across all device sizes.
Updated on: 2026-03-15T14:42:43+05:30
1K+ Views
Advertisements