The following code snippet demonstrates, how to create a mobile responsive table style using CSS3. For demo purpose we have used a single media query for mobile, you can extend it to work for tablet or different sized screens.
HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Popup Dropdown CSS Example</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<style>
/* Your stylesheet here */
</style>
</head>
<body>
<div class="wrapper">
<div class="table">
<div class="row header">
<div class="cell">Company</div>
<div class="cell">Contact</div>
<div class="cell">Location</div>
</div>
<div class="row">
<div class="cell">Alfreds Futterkiste </div>
<div class="cell">Maria Anders</div>
<div class="cell">UK</div>
</div>
<div class="row">
<div class="cell">Centro comercial Moctezuma </div>
<div class="cell">Francisco Chang</div>
<div class="cell">Germany</div>
</div>
<div class="row">
<div class="cell">Ernst Handel</div>
<div class="cell">Roland Mendel</div>
<div class="cell">Austria</div>
</div>
<div class="row">
<div class="cell">Laughing Bacchus Winecellars </div>
<div class="cell">Yoshi Tannamuri</div>
<div class="cell">Canada</div>
</div>
</div>
<!--Table-->
</div>
</body>
</html>
CSS Stylesheet
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
font-size: 16px;
line-height: 20px;
font-weight: 400;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.wrapper {
margin: 0 auto;
max-width: 1024px;
margin-top: 40px;
}
.table {
margin: 0 0 40px 0;
width: 100%;
display: table;
}
.row {
display: table-row;
background: #fff;
}
.row:nth-of-type(odd) {
background: #ebeff2;
}
.row.header {
font-weight: 900;
color: #ffffff;
background: #039BE5;
}
.cell {
padding: 10px 12px;
display: table-cell;
}
@media screen and (max-width: 580px) {
.table {
display: block;
}
.row {
padding: 12px 0;
display: block;
}
.cell {
padding: 2px 12px;
display: block;
}
}