Chi Design System

Tables

Tables must be wrapped inside a section with the a-table class and a div. The table must have the cellpadding and the cellspacing set to 0. Also, the table headers must be inside a div element.

name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr>
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

If section height is lower than table height then the table headers are going to be fixed on top and the content can be scrolled.

name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table" style="width: 640px;height: 144px;">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr>
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

Tables can be bordered with the modifier -bordered.

name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table -bordered" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr>
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

Or borderless using the modifier -borderless.

name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table -borderless" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr>
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

The table can be striped with the modifier -striped.

name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table -striped" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr>
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

And we can enable a hover state over the rows.

name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table -hover" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr>
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

There are modifiers for the rows to express different states. For example we can disable a row with the attribute disabled="disabled".

name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr disabled="disabled">
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

or just use the following classes:

  • rowSuccess
  • rowWarning
  • rowDanger
  • rowInfo
name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr class="-rowSuccess">
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>
name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr class="-rowWarning">
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>
name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr class="-rowDanger">
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>
name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr class="-rowInfo">
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

Sometimes we need to express that a column is sorted. For that, we have to use the column header modifier -sorted in conjunction of one of the followin modifiers:

  • -ascending
  • -descending
name
ID
last login
Manuel Martin manuel Nov 5, 2017 10:15 AM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
David Navarro david Dec 18, 2017 3:26 PM
<section class="a-table" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th class="-sorted -ascending">
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
                <tr>
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>
name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th class="-sorted -descending">
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr>
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

Last but not least we could use size modifiers.

  • -small
  • -large
name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table -small" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr>
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>
name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table -large" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr>
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

All the different modifiers can be combined in order to create complex and beautiful tables.

name
ID
last login
David Navarro david Dec 18, 2017 3:26 PM
Diego Sanjuan diego Dec 18, 2017 2:38 AM
Manuel Martin manuel Nov 5, 2017 10:15 AM
<section class="a-table" style="width: 640px">
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th width="48px">
                        <div class="-lh1"><input class="a-input" type="checkbox" id="chk-1" /><label for="chk-1"></label></div>
                    </th>
                    <th class="-sorted -descending">
                        <div>name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>last login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="-rowWarning">
                    <td class="-lh1"><input class="a-input" type="checkbox" id="chk-1-01" checked="checked" /><label for="chk-1-01"></label></td>
                    <td>David Navarro</td>
                    <td>david</td>
                    <td>Dec 18, 2017 3:26 PM</td>
                </tr>
                <tr>
                    <td class="-lh1"><input class="a-input" type="checkbox" id="chk-1-02" /><label for="chk-1-02"></label></td>
                    <td>Diego Sanjuan</td>
                    <td>diego</td>
                    <td>Dec 18, 2017 2:38 AM</td>
                </tr>
                <tr>
                    <td class="-lh1"><input class="a-input" type="checkbox" id="chk-1-03" /><label for="chk-1-03"></label></td>
                    <td>Manuel Martin</td>
                    <td>manuel</td>
                    <td>Nov 5, 2017 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>