Rominou34/soft-css

table {
  margin: 1em auto;
}

table td {
  line-height: 1.6;
  padding: 0.2em 0.5em;
}

/******** CLASSIC DESIGN ********/
thead, tfoot {
  font-weight: bold;
  line-height: 2;
}

thead {
  background-color: $grey-lighter;
}

table {
  border: 1px solid $grey-dark;
}

table > :not(:last-child),
tbody > :not(:last-child) {
  border-bottom: 1px solid $grey-light;
}

/******** MINIMALISTIC DESIGN ********/

table.min thead,
table.min tbody,
table.min tfoot {
  background-color: #777;
  background-color: rgba(0,0,0,0);
}

table.min,
table.min thead,
table.min tbody,
table.min td,
table.min tr,
table.min tfoot {
  border-width: 0;
}

table.min thead {
  border-bottom: 2px solid #8e8e8e;
}

table.min > :last-child {
  border-bottom: 2px solid #c5c5c5;
}

table.min tfoot {
  border-top: 1px solid #a4a4a4;
}

/******** FLAT DESIGN ********/

table.flat,
table.flat * {
  border-width: 0;
}

/******** ALTERNATING ROWS ********/

table.alt tbody > tr:nth-child(even) {background: $bg-color-primary}
/*table.alt tbody > tr:nth-child(odd) {background: #fff}*/

/******** REACTIVE DESIGN ********/

table.reactive :not(thead):not(tfoot) tr:hover {
  background-color: lighten($primary-color, 40%);
  background-color: $bg-color-primary;
}

table.reactive :not(thead):not(tfoot) tr td:hover {
  background-color: lighten($primary-color, 25%);
  background-color: $bg-color-primary;
}