Skip to content

Instantly share code, notes, and snippets.

@nawawi

nawawi/table-responsive.html

Last active April 20, 2020 02:49
Show Gist options
  • Save nawawi/6c07c386b5db596cb81a to your computer and use it in GitHub Desktop.
Save nawawi/6c07c386b5db596cb81a to your computer and use it in GitHub Desktop.
Download ZIP
table responsive
Raw
table-responsive.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>table responsive</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
@media screen and (max-width: 600px) {
table.table-grid {
border:0!important;
}
tbody.tbody-grid tr {
margin-bottom: 10px;
display: block;
}
tbody.tbody-grid td {
display: block;
text-align: right;
}
tbody.tbody-grid td:before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
</style>
</head>
<body>
<table class='table table-condensed table-grid'>
<thead class='hidden-xs'>
<tr>
<th>LABEL1</th>
<th>LABEL2</th>
<th>LABEL3</th>
<th>LABEL4</th>
<th>LABEL5</th>
<th>LABEL6</th>
<th>LABEL7</th>
<th>LABEL8</th>
<th>LABEL9</th>
<th>LABEL10</th>
</tr>
</thead>
<tbody class='tbody-grid'>
<tr>
<td data-label="LABEL1">DATA1 aaa aaa aa</th>
<td data-label="LABEL2">DATA2 bbb bbb bb</th>
<td data-label="LABEL3">DATA3 ccc ccc cc</th>
<td data-label="LABEL4">DATA4 ddd ddd dd</th>
<td data-label="LABEL5">DATA5 eee eee ee</th>
<td data-label="LABEL6">DATA6 fff fff ff</th>
<td data-label="LABEL7">DATA7 ggg ggg gg</th>
<td data-label="LABEL8">DATA8 hhh hhh hh</th>
<td data-label="LABEL9">DATA9 iii iii ii</th>
<td data-label="LABEL10">DATA10 jjj jjj jj</th>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment