Table | siimple css

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.