Cacher is the code snippet organizer for pro developers

> 1%
last 2 versions

<h1>Table test</h1>
<table class="test">
  <caption>Summary Caption</caption>
  <thead>
    <tr>
      <th>Cat</th>
      <th>Cat</th>
      <th>Cat</th>
      <th>Cat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>item</td>
      <td>item</td>
      <td>item</td>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
      <td>item</td>
      <td>item</td>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
      <td>item</td>
      <td>item</td>
      <td>item</td>
    </tr>
  </tbody>
</table>

table {
  -webkit-font-feature-settings: "kern", "liga", "pnum";
          font-feature-settings: "kern", "liga", "pnum";
  border-collapse: collapse;
  margin: 0.75em 0;
  table-layout: fixed;
  width: 100%;
}

th {
  border-bottom: 1px solid #9a9a9a;
  font-weight: 600;
  padding: 0.75em 0;
  text-align: left;
}

td {
  border-bottom: 1px solid silver;
  padding: 0.75em 0;
}

tr,
td,
th {
  vertical-align: middle;
}

.test th, .test td {
  padding: 0.25rem;
  text-align: left;
  /*border: 1px solid #ccc;*/
}

.test tbody tr:nth-child(odd) {
  background: #eee;
}

/*  Reduces cell padding */
/* =============================================================
    TABLES
    Table styling.
 * ============================================================= */
/*  Removes default browser settings
 *  and evens out inconsistencies. */
/*  Removes the border-top from the first row. */
.table thead:first-child tr th,
.table thead:first-child tr td {
  border-top: 0;
}

/*  Adds border-top between two table-body sections. */
.table tbody + tbody {
  border-top: 0.14286em solid #b8b8b8;
}

/* # table stripped



*/
/* # table Bordered

Adds borders and border-radius.

*/
.table-bordered th + th,
.table-bordered td + td,
.table-bordered th + td,
.table-bordered td + th {
  border-left: 0.07143em solid #b8b8b8;
}

.table-bordered thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td {
  border-top: 0;
}

.table-bordered thead:first-child tr:first-child th:first-child,
.table-bordered tbody:first-child tr:first-child td:first-child {
  border-radius: 0.47059em 0 0 0;
}

.table-bordered thead:first-child tr:first-child th:last-child,
.table-bordered tbody:first-child tr:first-child td:last-child {
  border-radius: 0 0.47059em 0 0;
}

.table-bordered thead:last-child tr:last-child th:first-child,
.table-bordered tbody:last-child tr:last-child td:first-child {
  border-radius: 0 0 0 0.47059em;
}

.table-bordered thead:last-child tr:last-child th:last-child,
.table-bordered tbody:last-child tr:last-child td:last-child {
  border-radius: 0 0 0.47059em 0;
}

// ----
// libsass (v3.5.0.beta.2)
// ----

@import "bourbon/bourbon";
@import "include-media";
@import "susy";

$small-spacing: (1.5 / 2) * 1em;

$base-border-color: silver;
$base-border: 1px solid $base-border-color;
// Base

table {
  font-feature-settings: "kern", "liga", "pnum"; // Autoprefixer
  border-collapse: collapse;
  margin: $small-spacing 0;
  table-layout: fixed;
  width: 100%;
}

th {
  border-bottom: 1px solid darken($base-border-color, 15%);
  font-weight: 600;
  padding: $small-spacing 0;
  text-align: left;
}

td {
  border-bottom: $base-border;
  padding: $small-spacing 0;
}

tr,
td,
th {
  vertical-align: middle;
}
// ----------------------------------------
// // ------ tables config ------
// ----------------------------------------

// ----------------------------------------
// // ------ colors ------
// ----------------------------------------

$table-border-color: #b8b8b8;
$table-bg-hover:#a0a0a0;

// Stripped alternate colors on odd rows
%table-stripped{
    th, td {
        padding: 0.25rem;
        text-align: left;
        /*border: 1px solid #ccc;*/
    }
    tbody tr:nth-child(odd) {
        background: #eee;
    }
}

%table-hover{
  > tbody > tr:hover {
    > td,
    > th {
      background-color: $table-bg-hover;
    }
  }
}
/*  Reduces cell padding */
%table-condensed{
  th,td {
    padding: $small-spacing / 4;
  }
}

@mixin table($shorthands){
  @for $i from 1 through length($shorthands){
    $item: nth($shorthands, $i);

    @if($item == stripped){
      @extend %table-stripped;
    }
    @else if($item == condensed){
      @extend %table-condensed;
    }
    @else if($item == hover){
      @extend %table-hover;
    }
    @else{
      @error "Selector :" + & +" : no keyword found in arglist for "+   + $item; 
    }
  }
}


.test{
  
  @include table(stripped);
}



// ----------------------------------------
// // ------ table settings ------
// ----------------------------------------

$table-border-width: .071428571em;
$table-border-style: solid;

$table-margin-bottom: 1.529411765em;
$table-cell-padding: .470588235em;
$table-cell-text-align: left;
$table-cell-border-top: $table-border-width $table-border-style $table-border-color;

$table-header-font-weight: bold;
$table-body-border-top: .142857143em $table-border-style $table-border-color;

$table-condensed-padding: .294117647em;

$table-bordered-border: $table-border-width $table-border-style $table-border-color;
$table-bordered-border-radius: .470588235em;
$table-border-left: $table-border-width $table-border-style $table-border-color;
$table-bordered-child-radius: .470588235em;




/* =============================================================
    TABLES
    Table styling.
 * ============================================================= */

/*  Removes default browser settings
 *  and evens out inconsistencies. */


/*  Removes the border-top from the first row. */
.table thead:first-child tr th,
%table thead:first-child tr th,
.table thead:first-child tr td,
%table thead:first-child tr td {
    border-top: 0;
}

/*  Adds border-top between two table-body sections. */
.table tbody + tbody,
%table tbody + tbody {
    border-top: $table-body-border-top;
}



/* # table stripped



*/



/* # table Bordered

Adds borders and border-radius.

*/

%table-bordered {
    border: $table-bordered-border;
    border-collapse: separate;
    *border-collapse: collapsed;
    border-radius: $table-bordered-border-radius;
    // Remove top border from thead by default
    > caption + thead,
    > colgroup + thead,
    > thead:first-child {
      > tr:first-child {
        > th,
        > td {
          border-top: 0;
        }
      }
    }
}

.table-bordered th + th,
%table-bordered th + th,
.table-bordered td + td,
%table-bordered td + td,
.table-bordered th + td,
%table-bordered th + td,
.table-bordered td + th,
%table-bordered td + th {
    border-left: $table-border-left;
}

.table-bordered thead:first-child tr:first-child th,
%table-bordered thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
%table-bordered tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td,
%table-bordered tbody:first-child tr:first-child td {
    border-top: 0;
}

.table-bordered thead:first-child tr:first-child th:first-child,
%table-bordered thead:first-child tr:first-child th:first-child,
.table-bordered tbody:first-child tr:first-child td:first-child,
%table-bordered tbody:first-child tr:first-child td:first-child {
    border-radius: $table-bordered-child-radius 0 0 0;
}

.table-bordered thead:first-child tr:first-child th:last-child,
%table-bordered thead:first-child tr:first-child th:last-child,
.table-bordered tbody:first-child tr:first-child td:last-child,
%table-bordered tbody:first-child tr:first-child td:last-child {
    border-radius: 0 $table-bordered-child-radius 0 0;
}

.table-bordered thead:last-child tr:last-child th:first-child,
%table-bordered thead:last-child tr:last-child th:first-child,
.table-bordered tbody:last-child tr:last-child td:first-child,
%table-bordered tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 $table-bordered-child-radius;
}

.table-bordered thead:last-child tr:last-child th:last-child,
%table-bordered thead:last-child tr:last-child th:last-child,
.table-bordered tbody:last-child tr:last-child td:last-child,
%table-bordered tbody:last-child tr:last-child td:last-child {
    border-radius: 0 0 $table-bordered-child-radius 0;
}


// Hover effect
//
// Placed here since it has to come after the potential zebra striping

h1 Table test
table.test
  caption Summary Caption
  thead
    tr
      th Cat
      th Cat
      th Cat
      th Cat
  tbody
    tr
      td item
      td item
      td item
      td item
    tr
      td item
      td item
      td item
      td item
    tr
      td item
      td item
      td item
      td item