Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Chris Coyier's responsive table CSS adopted for Twitter Bootstrap v3.2
.table {
font-size: 16px;
line-height: 22px;
color: #53626f;
display: block;
position: relative;
}
.table thead {
display: block;
float: left;
}
.table tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap;
}
.table thead tr {
display: block;
}
.table th {
display: block;
}
.table tbody tr {
display: inline-block;
vertical-align: top;
}
.table td {
display: block;
min-height: 1.25em;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 20px;
border: 1px solid #dedede;
vertical-align: top;
}
.table > thead > tr > th {
background-color: #999;
font-family: "Franklin Gothic Book", Arial, sans-serif;
color: #fff;
}
.table > tbody > tr > th {
font-family: "Franklin Gothic Book", Arial, sans-serif;
font-size: 16px;
}
.table > tbody > tr > th .subnote {
display: block;
font-size: 14px;
font-weight: normal;
}
.table-striped > tbody > tr:nth-child(2n+1) > td,
.table-striped > tbody > tr:nth-child(2n+1) > th,
.table > tbody > tr > th {
background-color: #f6f6f6;
}
.table.table-stacked thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.table.table-stacked tbody tr {
display: block;
}
.table.table-stacked td {
display: block;
position: relative;
padding-left: 50%;
}
.table.table-stacked td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
display: block;
top: 0;
left: 0;
width: 45%;
padding: 20px;
white-space: nowrap;
min-height: 1.25em;
background-color: #999;
font-family: "Franklin Gothic Book", Arial, sans-serif;
color: #fff;
}
.table-stacked > tbody > tr:nth-child(2n+1) > td {
background-color: #f6f6f6;
}
@media (min-width: 768px) {
.table {
display: block;
position: static;
}
.table thead {
display: table-header-group;
float: none;
width: 100%;
}
.table tbody {
display: table-row-group;
width: 100%;
position: static;
overflow-x: auto;
white-space: normal;
}
.table thead tr,
.table.table-stacked thead tr {
display: table-row;
position: static;
}
.table th {
display: table-cell;
}
.table tbody tr,
.table.table-stacked tbody tr {
display: table-row;
vertical-align: top;
}
.table td,
.table.table-stacked td {
display: table-cell;
min-height: 1.25em;
position: static;
padding-left: 20px;
}
.table.table-stacked td:before {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment