Skip to content

Instantly share code, notes, and snippets.

@shazdeh
Created August 2, 2014 13:35
Show Gist options
  • Save shazdeh/fe2115181cb1ce45dc23 to your computer and use it in GitHub Desktop.
Save shazdeh/fe2115181cb1ce45dc23 to your computer and use it in GitHub Desktop.
Basic table styles
table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
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: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
table > caption + thead > tr:first-child > th,
table > colgroup + thead > tr:first-child > th,
table > thead:first-child > tr:first-child > th,
table > caption + thead > tr:first-child > td,
table > colgroup + thead > tr:first-child > td,
table > thead:first-child > tr:first-child > td {
border-top: 0;
}
table > tbody + tbody {
border-top: 2px solid #ddd;
}
table table {
background-color: #fff;
}
table > tbody > tr:nth-child(odd) > td,
table > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
table > tbody > tr:hover > td,
table > tbody > tr:hover > th {
background-color: #f5f5f5;
}
table col[class*="col-"] {
position: static;
display: table-column;
float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
position: static;
display: table-cell;
float: none;
}
table > thead > tr > td.active,
table > tbody > tr > td.active,
table > tfoot > tr > td.active,
table > thead > tr > th.active,
table > tbody > tr > th.active,
table > tfoot > tr > th.active,
table > thead > tr.active > td,
table > tbody > tr.active > td,
table > tfoot > tr.active > td,
table > thead > tr.active > th,
table > tbody > tr.active > th,
table > tfoot > tr.active > th {
background-color: #f5f5f5;
}
table > tbody > tr > td.active:hover,
table > tbody > tr > th.active:hover,
table > tbody > tr.active:hover > td,
table > tbody > tr:hover > .active,
table > tbody > tr.active:hover > th {
background-color: #e8e8e8;
}
@media screen and (max-width: 767px) {
table {
width: 100%;
margin-bottom: 15px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
table > table > thead > tr > th,
table > table > tbody > tr > th,
table > table > tfoot > tr > th,
table > table > thead > tr > td,
table > table > tbody > tr > td,
table > table > tfoot > tr > td {
white-space: nowrap;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment