Sircus

Components Module for table Elements.

sircus-components-table | v2.0.0

  <table class="Table">
    ...
  </table>

<table class="Table Table--even">
...
</table>

<table class="Table Table--border">
...
</table>

npm install sircus-components-table sircus-variables

@import "sircus-components-table";
@import "sircus-variables";

:root {
  --Table-border: 1px solid var(--borderColor);
  --Table-divitedBorder: 2px solid var(--borderColor);
  --Table-padding: var(--space-tn) var(--gutter);
  --Table-borderColor: var(--borderColor);
  --Table-evenColor: var(--gray-5);
}

/*　sircus-components-table
======================================== */
.Table {
  width: 100%;
  max-width: 100%;
  padding: 0;
  text-align: left;
  border-collapse: collapse;
  border-spacing: 0;
}

.Table th,
.Table td {
  padding: var(--Table-padding);
  border-top: var(--Table-border);
}

.Table > thead {
  border-bottom: var(--Table-divitedBorder);
}

.Table > tfoot {
  border-top: var(--Table-divitedBorder);
}

.Table tr:first-child th,
.Table tr:first-child td {
  border-top: 0;
}

.Table--even tr:nth-child(even) {
  background-color: var(--Table-evenColor);
}

.Table--border {
  border: var(--Table-border);
}

.Table--border th,
.Table--border td {
  border-left: var(--Table-border);
}