Tabelle

Basic Elements

Summary

the table rules assist with the sest up of HMTL tables / file tables and offer diverse adjustment possibilities.

Options and Modifications

on the table

Name Description
.compact reduces the hight of the table lines
.bordered sets a frame around the table for the table cells
.striped emphasizes every second line by light colour
.rounded roundings for the table
.hover hover-support for table lines by emphasizing

on the rows/cells

Name Description
.active Sets a line or table cell as active and emphasizes it
.size-1 Sets a size of a table cell. The CSS-class must be set to the th cell in the thead.

Markup

<table class="table">
    <thead>
        <tr>
            <th>Field 1</th>
            <th>Field 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>td 1-1</td>
            <td>td 1-2</td>
        </tr>
        <tr>
            <td>td 2-1</td>
            <td>td 2-2</td>
        </tr>
        <tr class="primary">
            <td>td 3-1</td>
            <td>td 3-2</td>
        </tr>
        <tr>
            <td>td 4-1</td>
            <td>td 4-2</td>
        </tr>
        <tr>
            <td class="primary">td 5-1</td>
            <td>td 5-2</td>
        </tr>
    </tbody>
</table>

example table

Field 1 Field 2
td 1-1 td 1-2
td 2-1 td 2-2
td 3-1 td 3-2
td 4-1 td 4-2
td 5-1 td 5-2

example table.compact.striped

<table class="table compact striped">
    <thead>
        <tr class="primary">
            <th>Field 1</th>
            <th>Field 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>td 1-1</td>
            <td>td 1-2</td>
        </tr>
        <tr class="success">
            <td>td 2-1</td>
            <td>td 2-2</td>
        </tr>
        <tr>
            <td>td 3-1</td>
            <td>td 3-2</td>
        </tr>
        <tr>
            <td class="danger">td 4-1</td>
            <td>td 4-2</td>
        </tr>
        <tr>
            <td>td 5-1</td>
            <td class="warning">td 5-2</td>
        </tr>
        <tr>
            <td>td 6-1</td>
            <td>td 6-2</td>
        </tr>
        <tr>
            <td class="inverse">td 7-1</td>
            <td>td 7-2</td>
        </tr>
        <tr>
            <td>td 8-1</td>
            <td class="default">td 8-2</td>
        </tr>
        <tr class="royal">
            <td>td 9-1</td>
            <td>td 9-2</td>
        </tr>
    </tbody>
</table>
Field 1 Field 2
td 1-1 td 1-2
td 2-1 td 2-2
td 3-1 td 3-2
td 4-1 td 4-2
td 5-1 td 5-2
td 6-1 td 6-2
td 7-1 td 7-2
td 8-1 td 8-2
td 9-1 td 9-2
Name Type Files Languages
PHP JavaScript Python
Alpha Team Project 1 2
Beta Team Project 1 52
Project 2 12
Project 3 21

Responsive

For a responsive table the table must receive the class responsive and the data-th attribute must be set to the cells of the columns of the tbody with the belonging th descriptions.

example

<table class="table responsive">
    <thead>
        <tr class="primary">
            <th>Field 1</th>
            <th>Field 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-th="Field 1">td 1-1</td>
            <td data-th="Field 2">td 1-2</td>
        </tr>
        <tr>
            <td data-th="Field 1">td 2-1</td>
            <td data-th="Field 2">td 2-2</td>
        </tr>
    </tbody>
</table>

  1. The size-definitions run across the SASS configuration $table-col-default-sizes. When changing the list by adding/removing sizes, the CSS-classes adjust as well with size-support. The change concerns the DIV-tables as well! ↩