Web Toolkit

image/svg+xml GitHub

Table: Compact 

<table class="Table Table--withBorder Table--compact u-text-r-xxs">
    <caption class="u-hiddenVisually">nulla rerum magni</caption>
    <thead>
        <tr class="u-border-bottom-xs">
            <th scope="col">Tab. 1</th>
            <th scope="col">Tab. 2</th>
            <th scope="col">Tab. 3</th>
            <th scope="col">Tab. 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tab. 1</td>
            <td>Tab. 2</td>
            <td>Tab. 3</td>
            <td>Tab. 4</td>
        </tr>
        <tr>
            <td>Tab. 1</td>
            <td>Tab. 2</td>
            <td>Tab. 3</td>
            <td>Tab. 4</td>
        </tr>
        <tr>
            <td>Tab. 1</td>
            <td>Tab. 2</td>
            <td>Tab. 3</td>
            <td>Tab. 4</td>
        </tr>
        <tr>
            <td>Tab. 1</td>
            <td>Tab. 2</td>
            <td>Tab. 3</td>
            <td>Tab. 4</td>
        </tr>
    </tbody>
</table>
  • Content: 
    /** @define Table; */

/*
 *	Fork of suitcss-component-table:
 *
 * 		https://github.com/trunkclub/suitcss-components-table
 * 		Copyright (c) 2014 Trunk Club
 *
 *  alas, not included in npm registry.
 *
 */

/** @define Table; weak; */

:root {
  --Table-border-color: #d6dce3;
  --Table-cell-pad-h: 0.5em;
  --Table-cell-pad-v: 1em;
  --Table-hover-color: #e5f1fa;
  --Table-stripe-color: #f6f7f9;
}

.Table {
  border: 0;
  border-collapse: collapse;
  max-width: 100%;
  width: 100%;
}

/*
 *  [1] Don't extend utility class to make it overridable
 */

.Table td,
.Table th {
  @extend .u-padding-r-all;

  text-align: left; /* 1 */
}

.Table--fixed {
  table-layout: fixed;
}

/* Hover row modifiers
   ========================================================================== */

.Table--hover > tbody > tr:hover > th,
.Table--hover > tbody > tr:hover > td {
  background-color: var(--Table-hover-color);
}

/* Striped row modifiers
   ========================================================================== */

/**
 * Remove top borders on all cells.
 */

.Table--striped th,
.Table--striped td {
  border-top: 0;
}

.Table--striped tbody tr:nth-child(odd) {
  background-color: var(--Table-stripe-color);
}

/* Border modifiers
   ========================================================================== */

/**
 * Add border around table
 */

.Table--withBorder tr {
  border-bottom: 1px var(--Table-border-color) solid;
}

.Table--withBorder th {
  border-top: 1px var(--Table-border-color) solid;
}

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

/* Compact layout modifier
   ========================================================================== */

/**
 * Reduce vertical padding to match horizontal
 */

.Table--compact td,
.Table--compact th {
  padding: var(--Table-cell-pad-h);
}
  • URL: /components/raw/table/index.css
  • Filesystem Path: src/components/table/index.css
  • Size: 1.9 KB
  • Content: 
    import $ from 'jquery'

const opts = {
  responsiveTableSelector: '.js-TableResponsive'
}

$(document).ready(() => {
  if ($(opts.responsiveTableSelector).length > 0) {
    require(['tablesaw/dist/tablesaw.jquery.js', 'tablesaw/dist/tablesaw.css'], () => {
      $(document).trigger('enhance.tablesaw')
    })
  }
})
  • URL: /components/raw/table/index.js
  • Filesystem Path: src/components/table/index.js
  • Size: 317 Bytes

There are no notes for this item.