Skip to content

Instantly share code, notes, and snippets.

@JordanReiter
Created February 24, 2015 18:27
Show Gist options
  • Save JordanReiter/e5c03d950d10ec453571 to your computer and use it in GitHub Desktop.
Save JordanReiter/e5c03d950d10ec453571 to your computer and use it in GitHub Desktop.
Automatic pretty tables for Bootstrap 3
/*
This is inspired by the "Using Bootstrap the Right (Semantic) Way" article
https://www.ostraining.com/blog/coding/bootstrap-right-way/
Every time I added a table to a page, I was always adding bootstrap classes to it, like so:
<table class="table table-bordered table-striped">
This LESS file automatically gives all tables the styles from these classes.
From now on, for a table with borders, padding, and alternating row colors, just use:
<table></table>
Also, I could never remember whether the correct class for a tigher, more compact table
with less padding was `table-condensed` or `table-compact`, so I added the style table.compact
which adds on the `table-condensed` styles. To make a compact/condensed table (with all of
the other styles above as well) just use:
<table class="compact"></table>
To make the table responsive (automatically scrolling on mobile devices), add the class responsive:
<table class="responsive"></table>
If you want a table that does not have these styles, just give it the class `unstyled`:
<table class="unstyled"></table>
To use, just include this less file when compiling your css.
*/
table {
.table;
.table-bordered;
.table-striped;
}
table.compact {
.table-condensed;
}
table.responsive {
.table-responsive;
}
table.unstyled {
width: auto;
max-width: none;
margin-bottom: 0;
// Restores styles for cells
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
padding: 1px;
padding: initial;
line-height: normal;
vertical-align: middle;
vertical-align: initial;
border-top: 0;
}
}
}
// turns off stripes
> tbody > tr:nth-of-type(odd) {
background-color: rgba(0,0,0,0);
background-color: transparent;
background-color: inherit;
background-color: initial;
}
// Removes bottom align for column headings
> thead > tr > th {
vertical-align: middle;
vertical-align: initial;
border-bottom: 0;
}
// Remove top border from thead by default
> caption + thead,
> colgroup + thead,
> thead:first-child {
> tr:first-child {
> th,
> td {
border-top: 0;
}
}
}
// Account for multiple tbody instances
> tbody + tbody {
border-top: 0;
}
border: 0;
border: initial;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: 0;
border: initial;
}
}
}
> thead > tr {
> th,
> td {
border-bottom-width: 0;
border-bottom-width: initial;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment