<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mattrothenberg/pen/JKrGJZ?q=card%20list&order=popularity&depth=everything&show_forks=false" />
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<style class="cp-pen-styles">::-webkit-scrollbar {
width: 0.15em;
height: 0.15em;
}
::-webkit-scrollbar-thumb {
background: slategray;
}
::-webkit-scrollbar-track {
background: #b8c0c8;
}
body {
scrollbar-face-color: slategray;
scrollbar-track-color: #b8c0c8;
}
body,
html {
height: 100%;
width: 100%;
}
body {
font-family: "Roboto";
}
.wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
width: 100%;
}
body {
background: #f8f8f8;
}
button.btn {
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
border: 0;
border-radius: 0px;
}
button.btn i {
margin-right: 3px;
}
body.large-screen .table-wrapper {
max-width: 800px;
}
body.large-screen .card-list-table {
background: white;
}
body.large-screen .card-list-table tbody tr {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
margin: 0;
}
body.large-screen .card-list-table tbody tr:nth-of-type(even) {
background: #dfdfdf;
}
body.large-screen .card-list-table thead {
display: table-header-group;
}
body.large-screen .card-list-table thead th:last-child {
-webkit-box-shadow: none;
box-shadow: none;
}
body.large-screen .card-list-table thead th {
border-bottom: 1px solid #dfdfdf;
padding: 12px 24px;
}
body.large-screen .card-list-table tbody tr {
display: table-row;
padding-bottom: 0;
}
body.large-screen .card-list-table tbody tr:nth-of-type(even) {
background: #fff;
}
body.large-screen .card-list-table tbody td {
border-bottom: 1px solid #dfdfdf;
cursor: pointer;
display: table-cell;
padding: 20px 24px;
-webkit-transition: background .2s ease-out;
transition: background .2s ease-out;
vertical-align: middle;
}
body.large-screen .card-list-table tbody td:after {
display: none;
}
body.large-screen .card-list-table tbody td:before {
content: '';
}
body.large-screen .card-list-table tbody tr:hover td {
background: #fcf3d0;
}
.buttons {
margin: 10px 0 50px;
}
.table-wrapper {
max-width: 300px;
width: 80%;
margin: 0 auto 0;
max-height: 500px;
overflow-y: scroll;
position: relative;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
}
@media (min-width: 768px) {
.table-wrapper {
background: white;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
}
.card-list-table {
table-layout: fixed;
background: transparent;
margin-bottom: 0;
width: 100%;
}
.card-list-table thead {
display: none;
}
.card-list-table tbody tr {
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
background: #fff;
border-bottom: 1px solid #dfdfdf;
cursor: pointer;
display: block;
padding: 15px 10px;
margin: 0 0 10px 0;
}
.card-list-table tbody td {
border: 0;
display: block;
padding: 10px 10px 20px 40%;
position: relative;
}
.card-list-table tbody td:first-of-type::after {
visibility: hidden;
}
.card-list-table tbody td:after {
content: '';
width: calc(100% - 30px);
display: block;
margin: 0 auto;
height: 1px;
background: #dfdfdf;
position: absolute;
left: 0;
right: 0;
top: -6px;
}
.card-list-table tbody td:before {
color: rgba(0, 0, 0, 0.35);
text-transform: uppercase;
font-size: .85em;
content: attr(data-title);
display: table-cell;
font-weight: 500;
height: 100%;
left: 15px;
margin: auto;
position: absolute;
vertical-align: middle;
white-space: nowrap;
width: 40%;
}
.card-list-table thead th {
text-transform: uppercase;
font-size: .85em;
color: rgba(0, 0, 0, 0.35);
letter-spacing: .5pt;
}
</style></head><body>
<body class="large-screen">
<div class="wrap">
<div class="btn-toolbar buttons">
<div class="btn-group">
<button id="desktop" class="btn btn-primary">
<i class="fa fa-desktop" aria-hidden="true"></i>
Desktop Table
</button>
</div>
<div class="btn-group">
<button id="mobile" class="btn btn-default">
<i class="fa fa-mobile-phone" aria-hidden="true"></i>
Mobile Card List
</button>
</div>
</div>
<div class="table-wrapper">
<table class="table-responsive card-list-table">
<thead>
<tr>
<th>Column #1</th>
<th>Column #2</th>
<th>Column #3</th>
<th>Column #4</th>
<th>Column #5</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
<tr>
<td data-title="Column #1">Value #1</td>
<td data-title="Column #2">Value #2</td>
<td data-title="Column #3">Value #3</td>
<td data-title="Column #4">Value #4</td>
<td data-title="Column #5">Value #5</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://cdn.jsdelivr.net/jquery.floatthead/1.4.2/jquery.floatThead.min.js'></script>
<script >var desktopBtn = $("#desktop");
var mobileBtn = $("#mobile");
var body = $('body');
desktopBtn.on('click', function() {
body.addClass('large-screen');
togglePrimaryButtonStyle($(this));
})
mobileBtn.on('click', function() {
body.removeClass('large-screen');
togglePrimaryButtonStyle($(this));
})
function togglePrimaryButtonStyle(el) {
var sibling = el.parent('.btn-group').siblings('.btn-group').find('.btn');
el.addClass('btn-primary');
sibling.removeClass('btn-primary').addClass('btn-default');
}
//# sourceURL=pen.js
</script>
</body></html>
