siimple css v3.3.0 GitHub Examples Home
Table
Build a table using only divs
The siimple-table provides you a set of classes ready to create a table using div tags.
Header 1
Header 2
Header 3
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
<div class="siimple-table">
    <div class="siimple-table-header">
        <div class="siimple-table-row">
            <div class="siimple-table-cell">Header 1</div>
            <div class="siimple-table-cell">Header 2</div>
            <div class="siimple-table-cell">Header 3</div>
        </div>
    </div>
    <div class="siimple-table-body">
        <div class="siimple-table-row">
            <div class="siimple-table-cell">Cell 1</div>
            <div class="siimple-table-cell">Cell 2</div>
            <div class="siimple-table-cell">Cell 3</div>
        </div>
        <div class="siimple-table-row">
            <div class="siimple-table-cell">Cell 1</div>
            <div class="siimple-table-cell">Cell 2</div>
            <div class="siimple-table-cell">Cell 3</div>
        </div>
    </div>
</div>
Striped table
Add the siimple-table--striped class to the root table to add zebra striped style to the table.
Header 1
Header 2
Header 3
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 11
Cell 12
<div class="siimple-table siimple-table--striped">
  . . .
</div>
Bordered table
To display the table border, add siimple-table--border class to the table root.
Header 1
Header 2
Header 3
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 11
Cell 12
<div class="siimple-table siimple-table--border">
  . . .
</div>
Hovered rows
Add the siimple-table--hover class to the root table element to enable hover style.
Header 1
Header 2
Header 3
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 11
Cell 12
<div class="siimple-table siimple-table--hover">
  . . .
</div>
Coloring rows
Added in v3.2.0
Use siimple-table-row--{color} to color table rows.
Header 1
Header 2
Header 3
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 11
Cell 12
<div class="siimple-table">
    <div class="siimple-table-body">
        <div class="siimple-table-row siimple-table-row--primary">
            . . .
        </div>
        <div class="siimple-table-row siimple-table-row--success">
            . . .
        </div>
        <div class="siimple-table-row siimple-table-row--warning">
            . . .
        </div>
        <div class="siimple-table-row siimple-table-row--error">
            . . .
        </div>
    </div>
</div>
Sizing columns
Added in v3.2.0
To organize table with 12 columns, add siimple-table-cell--{size}.
Header 1
Header 2
Header 3
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
<div class="siimple-table">
    <div class="siimple-table-header">
        <div class="siimple-table-row">
            <div class="siimple-table-cell siimple-table-cell--2">Header 1</div>
            <div class="siimple-table-cell siimple-table-cell--5">Header 2</div>
            <div class="siimple-table-cell siimple-table-cell--5">Header 3</div>
        </div>
    </div>
    <div class="siimple-table-body">
        <div class="siimple-table-row">
            <div class="siimple-table-cell">Cell 1</div>
            <div class="siimple-table-cell">Cell 2</div>
            <div class="siimple-table-cell">Cell 3</div>
        </div>
        <div class="siimple-table-row">
            <div class="siimple-table-cell">Cell 1</div>
            <div class="siimple-table-cell">Cell 2</div>
            <div class="siimple-table-cell">Cell 3</div>
        </div>
    </div>
</div>
Fixed table layout
Added in v3.3.0
Add siimple-table--fixed class to the root table element to automatically divide equally the width of the columns across the table, regardless of content inside the cells.
Sortable columns
Added in v3.3.0
Add siimple-table-cell--sortable class to a siimple-table-cell element in the header of the table to display a sorting indicator in column where the class is added. Also, you can add siimple-table-cell--asc or siimple-table-cell--desc to set the sort order.
Header 1
Header 2
Header 3
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
<div class="siimple-table">
    <div class="siimple-table-header">
        <div class="siimple-table-row">
            <div class="siimple-table-cell siimple-table-cell--sortable">
                Header 1
            </div>
            <div class="siimple-table-cell siimple-table-cell--sortable siimple-table-cell--asc">
                Header 2
            </div>
            <div class="siimple-table-cell siimple-table-cell--sortable siimple-table-cell--desc">
                Header 3
            </div>
        </div>
    </div>
    <div class="siimple-table-body">
        <div class="siimple-table-row">
            <div class="siimple-table-cell">Cell 1</div>
            <div class="siimple-table-cell">Cell 2</div>
            <div class="siimple-table-cell">Cell 3</div>
        </div>
        <div class="siimple-table-row">
            <div class="siimple-table-cell">Cell 1</div>
            <div class="siimple-table-cell">Cell 2</div>
            <div class="siimple-table-cell">Cell 3</div>
        </div>
    </div>
</div>
Found a mistake or want to help improve this documentation? Suggest changes.