Skip to content

Instantly share code, notes, and snippets.

@m3g4p0p
Last active Nov 9, 2018
Embed
What would you like to do?
Bootstrap card table

Bootstrap card table PoC

Download zip file, then

yarn install
yarn build
<!DOCTYPE html>
<head>
<title>Card Table</title>
<link rel="stylesheet" href="./card-table.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
<th>Homepage</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header="Name">John</td>
<td data-header="Age">27</td>
<td data-header="Occupation">Developer</td>
<td data-header="Homepage">
<a href="www.johnthedevloper.com">www.johnthedevloper.com</a>
</td>
</tr>
<tr>
<td data-header="Name">Jane</td>
<td data-header="Age">33</td>
<td data-header="Occupation">Designer</td>
<td data-header="Homepage">
<a href="www.janethedesigner.com">www.janethedesigner.com</a>
</td>
</tr>
<tr>
<td data-header="Name">Jenny</td>
<td data-header="Age">17</td>
<td data-header="Occupation">Project manager</td>
<td data-header="Homepage">
<a href="www.jennythepm.com">www.jennythepm.com</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
@import './node_modules/bootstrap/scss/bootstrap.scss';
tr {
@extend .card;
@extend .list-group;
}
th,
td {
&:first-child {
@extend .list-group-item-primary;
}
&:last-child {
@extend .card-footer;
}
&:not(:last-child) {
@extend .list-group-item;
}
}
@media screen and (max-width: 480px) {
tbody {
display: flex;
flex-wrap: wrap;
}
thead {
display: none;
}
tr {
margin: .5em;
flex-grow: 1;
}
td {
&::before {
content: attr(data-header) ': ';
}
&:first-child {
font-weight: bold;
}
&:first-child,
&:last-child {
&::before {
content: '';
}
}
}
}
@media screen and (min-width: 481px) {
tbody {
display: table-row-group;
}
thead {
display: table-header-group;
}
tr {
display: table-row;
}
td,
th {
display: table-cell !important;
color: inherit !important;
background-color: inherit !important;
}
}
{
"devDependencies": {
"node-sass": "^4.9.0",
"bootstrap": "^4.1.1"
},
"scripts": {
"build": "node-sass card-table.scss card-table.css",
"watch": "node-sass -w card-table.scss card-table.css"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment