Teutonic CSS

Standard table

→

This is a no-frills table. Just add a .table class to a table to have boxy Teutonic style table.

Syntax: table.table

SCSS: _table.scss

Country	Flag	Population	Capital	Language
USA	🇺🇸	325 million	Washington, D.C.	English
Germany	🇩🇪	82 million	Berlin	German
Sweden	🇸🇪	10 million	Stockholm	Swedish

<table class="table">
  <tr>
    <th>Country</th>
    <th class="hide-t">Flag</th>
    <th>Population</th>
    <th>Capital</th>
    <th class="hide-p">Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td class="hide-t">🇺🇸</td>
    <td>325 million</td>
    <td>Washington, D.C.</td>
    <td class="hide-p">English</td>
  </tr>
  <tr>
    <td>Germany</td>
    <td class="hide-t">🇩🇪</td>
    <td>82 million</td>
    <td>Berlin</td>
    <td class="hide-p">German</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td class="hide-t">🇸🇪</td>
    <td>10 million</td>
    <td>Stockholm</td>
    <td class="hide-p">Swedish</td>
  </tr>
</table>

Fixed table

→

Same table as above, here all columns have the same width.

Syntax: table.table.fixed

SCSS: _table.scss

Country	Flag	Population	Capital	Language
USA	🇺🇸	325 million	Washington, D.C.	English
Germany	🇩🇪	82 million	Berlin	German
Sweden	🇸🇪	10 million	Stockholm	Swedish

Auto width table

→

Same table as above, here the table only occupies as much width, as it needs.

Syntax: table.table.auto

SCSS: _table.scss

Country	Flag	Population	Capital	Language
USA	🇺🇸	325 million	Washington, D.C.	English
Germany	🇩🇪	82 million	Berlin	German
Sweden	🇸🇪	10 million	Stockholm	Swedish

Spacious table

→

Same table as above, here the table cells have more padding.

Syntax: table.table.space

SCSS: _table.scss

Country	Flag	Population	Capital	Language
USA	🇺🇸	325 million	Washington, D.C.	English
Germany	🇩🇪	82 million	Berlin	German
Sweden	🇸🇪	10 million	Stockholm	Swedish

Dense table

→

Same table as above, here the table cells have less padding.

Syntax: table.table.dense

SCSS: _table.scss

Country	Flag	Population	Capital	Language
USA	🇺🇸	325 million	Washington, D.C.	English
Germany	🇩🇪	82 million	Berlin	German
Sweden	🇸🇪	10 million	Stockholm	Swedish

Horizontal border

→

Same table as above, here the table cells have only a horizontal border.

Syntax: table.table.bo-h

SCSS: _table.scss

Country	Flag	Population	Capital	Language
USA	🇺🇸	325 million	Washington, D.C.	English
Germany	🇩🇪	82 million	Berlin	German
Sweden	🇸🇪	10 million	Stockholm	Swedish

Vertical border

→

Same table as above, here the table cells have only a vertical border.

Syntax: table.table.bo-v

SCSS: _table.scss

Country	Flag	Population	Capital	Language
USA	🇺🇸	325 million	Washington, D.C.	English
Germany	🇩🇪	82 million	Berlin	German
Sweden	🇸🇪	10 million	Stockholm	Swedish

Data tables with style