Skip to content

Instantly share code, notes, and snippets.

@melanieceraso
Created October 23, 2014 21:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save melanieceraso/7ff9efa359f369fc45b8 to your computer and use it in GitHub Desktop.
Save melanieceraso/7ff9efa359f369fc45b8 to your computer and use it in GitHub Desktop.
Dave Bushnell'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 > tbody > tr > th {
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 {
display: table-row;
position: static;
}
.table th {
display: table-cell;
}
.table tbody tr {
display: table-row;
vertical-align: top;
}
.table td {
display: table-cell;
min-height: 1.25em;
position: static;
padding-left: 20px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment