HTML Table made responsive only with CSS.
On Mobile the header row is fixed to the left, and the content is scrollable horizontally.
A Pen by Flor Antara on CodePen.
<h2>Responsive Table</h2> | |
<div class="table-wrapper"> | |
<table class="fl-table"> | |
<thead> | |
<tr> | |
<th>Header 1</th> | |
<th>Header 2</th> | |
<th>Header 3</th> | |
<th>Header 4</th> | |
<th>Header 5</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>1</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
</tr> | |
<tr> | |
<td>2</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
</tr> | |
<tr> | |
<td>3</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
</tr> | |
<tr> | |
<td>4</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
</tr> | |
<tr> | |
<td>5</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
</tr> | |
<tr> | |
<td>6</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
</tr> | |
<tr> | |
<td>7</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
</tr> | |
<tr> | |
<td>8</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
</tr> | |
<tr> | |
<td>9</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
</tr> | |
<tr> | |
<td>10</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
<td>Content</td> | |
</tr> | |
<tbody> | |
</table> | |
</div> |
HTML Table made responsive only with CSS.
On Mobile the header row is fixed to the left, and the content is scrollable horizontally.
A Pen by Flor Antara on CodePen.
*{ | |
box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
} | |
body{ | |
font-family: Helvetica; | |
-webkit-font-smoothing: antialiased; | |
background: rgba( 71, 147, 227, 1); | |
} | |
h2{ | |
text-align: center; | |
font-size: 18px; | |
text-transform: uppercase; | |
letter-spacing: 1px; | |
color: white; | |
padding: 30px 0; | |
} | |
/* Table Styles */ | |
.table-wrapper{ | |
margin: 10px 70px 70px; | |
box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 ); | |
} | |
.fl-table { | |
border-radius: 5px; | |
font-size: 12px; | |
font-weight: normal; | |
border: none; | |
border-collapse: collapse; | |
width: 100%; | |
max-width: 100%; | |
white-space: nowrap; | |
background-color: white; | |
} | |
.fl-table td, .fl-table th { | |
text-align: center; | |
padding: 8px; | |
} | |
.fl-table td { | |
border-right: 1px solid #f8f8f8; | |
font-size: 12px; | |
} | |
.fl-table thead th { | |
color: #ffffff; | |
background: #4FC3A1; | |
} | |
.fl-table thead th:nth-child(odd) { | |
color: #ffffff; | |
background: #324960; | |
} | |
.fl-table tr:nth-child(even) { | |
background: #F8F8F8; | |
} | |
/* Responsive */ | |
@media (max-width: 767px) { | |
.fl-table { | |
display: block; | |
width: 100%; | |
} | |
.table-wrapper:before{ | |
content: "Scroll horizontally >"; | |
display: block; | |
text-align: right; | |
font-size: 11px; | |
color: white; | |
padding: 0 0 10px; | |
} | |
.fl-table thead, .fl-table tbody, .fl-table thead th { | |
display: block; | |
} | |
.fl-table thead th:last-child{ | |
border-bottom: none; | |
} | |
.fl-table thead { | |
float: left; | |
} | |
.fl-table tbody { | |
width: auto; | |
position: relative; | |
overflow-x: auto; | |
} | |
.fl-table td, .fl-table th { | |
padding: 20px .625em .625em .625em; | |
height: 60px; | |
vertical-align: middle; | |
box-sizing: border-box; | |
overflow-x: hidden; | |
overflow-y: auto; | |
width: 120px; | |
font-size: 13px; | |
text-overflow: ellipsis; | |
} | |
.fl-table thead th { | |
text-align: left; | |
border-bottom: 1px solid #f7f7f9; | |
} | |
.fl-table tbody tr { | |
display: table-cell; | |
} | |
.fl-table tbody tr:nth-child(odd) { | |
background: none; | |
} | |
.fl-table tr:nth-child(even) { | |
background: transparent; | |
} | |
.fl-table tr td:nth-child(odd) { | |
background: #F8F8F8; | |
border-right: 1px solid #E6E4E4; | |
} | |
.fl-table tr td:nth-child(even) { | |
border-right: 1px solid #E6E4E4; | |
} | |
.fl-table tbody td { | |
display: block; | |
text-align: center; | |
} | |
} |