siimple 3.2.0 siimple.xyz
Components
Reusable advanced elements, including alerts, lists and more!
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>
Found a mistake or want to help improve this documentation? Suggest changes.