Table

Overview

Basic Table

<table class="table">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
  </tbody>
</table>

Table Bordered

<table class="table table--bordered">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
  </tbody>
</table>

Table Striped

<table class="table table--striped">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
  </tbody>
</table>

Table Hover

<table class="table table--hover">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
  </tbody>
</table>

Files

[https://github.com/davidbrooksio/cwf-lite/blob/master/style/modules/table.css](https://github.com/davidbrooksio/cwf-lite/blob/master/style/modules/table.css

• Directorystyle

  • Directorymodules

    • table.css

Stylesheet

@layer cwf-modules {
  .table {
    border-collapse: var(--table-border-collapse, collapse);
    border-spacing: var(--table-border-spacing, 0);
    caption-side: var(--table-caption-side, bottom);
    color: var(--table-color, inherit);
    margin: var(--table-margin, 0 0 var(--size-3) 0);
    width: var(--table-width, 100%);

    td,
    th {
      border-color: var(--table-cell-border-color, LightGrey);
      border-style: var(--table-cell-border-style, solid);
      border-width: var(--table-cell-border-width, 0 0 1px 0);
      padding: var(--table-cell-padding-top, var(--size-3))
        var(--table-cell-padding-right, var(--size-5))
        var(--table-cell-padding-bottom, var(--size-3))
        var(--table-cell-padding-left, var(--size-5));
      vertical-align: var(--table-cell-valign, top);
    }

    thead {
      color: var(--table-head-color, inherit);

      tr {
        background: var(--table-head-background, WhiteSmoke);

        > * {
          border-width: var(--table-head-cell-border-width, 0 0 2px 0);
        }
      }
    }

    tbody {
      color: var(--table-body-color, inherit);

      tr {
        background: var(--table-body-background, white);
      }
    }

    tfoot {
      color: var(--table-foot-color, inherit);

      tr {
        background: var(--table-foot-background, WhiteSmoke);

        > * {
          border-width: var(--table-foot-cell-border-width, 2px 0 1px 0);
        }
      }
    }

    &.table--bordered {
      td,
      th {
        border-width: var(--table-cell-border-width, 1px);
      }

      thead {
        tr {
          > * {
            border-width: var(--table-head-cell-border-width, 1px 1px 2px 1px);
          }
        }
      }

      tfoot {
        tr {
          > * {
            border-width: var(--table-foot-cell-border-width, 2px 1px 1px 1px);
          }
        }
      }
    }

    &.table--striped {
      tbody {
        tr {
          &:nth-of-type(even) {
            background: var(--table-row-even-background, WhiteSmoke);
          }

          &:nth-of-type(odd) {
            background: var(--table-row-odd-background, white);
          }
        }
      }
    }

    &.table--hover {
      tbody {
        tr {
          &:hover {
            > * {
              background: var(--table-row-hover-background, LightGrey);
            }
          }
        }
      }
    }
  }
}