CSS Toolkit - table

A CSS Toolkit module that provides a common structural table template styles to be extended with modifier classes.

Installation

• npm: npm install css-toolkit-table

Available classes

• table - [core] The core table component
• table-bordered - [modifier] For bordered table styles

Configuration

Adjust the custom properties to change the base defaults using postcss-custom-properties. For Example:

• --table-padding: 75rem;
• --table-border-width: 1px;
• --table-border-color: currentColor;

Use

Examples:

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Adam</td>
      <td>Richardson</td>
      <td>@iamadsric</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Alex</td>
      <td>Mitchell</td>
      <td>@zenelements</td>
    </tr>
  </tbody>
</table>

Theming / extending

As the module focuses on common structural styles, You can build your website-specific theme styles in your build process. For example:

@import "css-toolkit-table";

/*
 * Modifier: default table
 */

.table-default th,
.table-default td,
.table-default thead th,
.table-default tbody + tbody {
  border-color: #eceeef;
}

/*
 * Modifier: striped table
 */

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

/*
 * Modifier: small table
 */

.table-sm th,
.table-sm td {
  padding: .3rem;
}

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

Basic visual tests are in test/index.html.

Browser support

• Edge
• Firefox
• Google Chrome
• Internet Explorer 11+
• Opera
• Safari