DIV-Tabellen

Basic Elements

Summary

The table rules assist with setting up 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
.hover	hover-support for table lines by emphasizing
.striped	emphasizes every second line by light colour changes
.rounded	roundings for the table

on the rows/cells

Name	Description
.active	sets a line or table cell as active and emphasizes it
.size-1	sets a size for a table cell. the CSS-class must be set on the th cell in the thead.

Markup

<div class="div-table v1">
    <div class="table-heading">
        <div class="table-row">
            <div class="table-cell">
                Field 1
            </div>
            <div class="table-cell">
                Field 2
            </div>
        </div>
    </div>
    <div class="table-body">
        <div class="table-row">
            <div class="table-cell">
                table-cell 1-1
            </div>
            <div class="table-cell">
                table-cell 1-2
            </div>
        </div>
    </div>
    <div class="table-foot">
        <div class="table-row">
            <div class="table-cell">
                table-cell foot-1
            </div>
            <div class="table-cell">
                table-cell foot-2
            </div>
        </div>
    </div>
</div>

Example

Field 1

Field 2

table-cell 1-1

table-cell 1-2

table-cell 2-1

table-cell 2-2

table-cell 3-1

table-cell 3-2

table-cell foot-1

table-cell foot-2

---

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 also concerns the file-tables! ↩