We can easily create the table responsive using CSS3 and HTML5 thats makes our table more readable on small screen without the use of javascript.
In my example ,I had simply used the table tags such as <table></table>, <thead></thead>, <tr></tr>, <th></th>, <td></td>, <tbody></tbody>.
In the example, I used the data-label attribute to specify the specific thead element for each table cell in the table.
To make the table responsive I had simply used the media queries using CSS3 proprties.
Below is the HTML Code:-
<!DOCTYPE html>
<html>
<head>
<title>Responsive Table Using CSS3</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/media.css">
</head>
<body>
<div class="container">
<table>
<caption>CSS3 Responsive Table</caption>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Due Date</th>
<th scope="col">Amount</th>
<th scope=-"col">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account" scope="row">Visa - 3412</td>
<td data-label="Due Date">11/05/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/05/2016 - 31/05/2016</td>
</tr>
<tr>
<td data-label="Account" scope="row">Visa - 6076</td>
<td data-label="Due Date">03/06/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">01/06/2016 - 30/06/2016</td>
</tr>
<tr>
<td data-label="Account" scope="row">Corporate AMEX</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$1,181</td>
<td data-label="Period">01/01/2016 - 31/01/2016</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The CSS Code:-
table{
border: 1px solid #ccc;
border-collapse: collapse;
margin: 83px 0 0;
padding: 0;
width: 100%;
}
table caption {
font-size: 1.5em;
margin: 0.25em 0 0.75em;
}
table tr {
background: #f8f8f8 none repeat scroll 0 0;
border: 1px solid #ddd;
padding: 0.35em;
}
table th {
font-size: 0.85em;
letter-spacing: 0.1em;
text-transform: uppercase;
}
table th, table td {
padding: 0.625em;
text-align: center;
}
Media Query code:-
@media screen and (max-width: 639px) {
table { border: 0;
}
table thead { display: none;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
Conclusion:-
Hence, a responsive table has been created by simply using the CSS3 and HTML5 tags.
Note:-The responsive table can be viewed over all latest version of Safari 3.2+,Chrome ,Firefox 4+, Opera 10.5+, and IE 10.
0 Comment(s)