Skip to content

Instantly share code, notes, and snippets.

@jpen365
Last active July 12, 2016 11:09
Show Gist options
  • Save jpen365/337ee996d81ad4b6ea62474b3639df3b to your computer and use it in GitHub Desktop.
Save jpen365/337ee996d81ad4b6ea62474b3639df3b to your computer and use it in GitHub Desktop.
Make HTML tables responsive, requires responsive_tables.js
/* Credits:
This bit of code: Exis | exisweb.net/responsive-tables-in-wordpress
Original idea: Dudley Storey | codepen.io/dudleystorey/pen/Geprd */
@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block; text-align:center;}
tbody td:before {
content: attr(data-th);
display: block;
text-align:center;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment