Tables

Documentation for tables and table components.

Files

app/styles/modules/_tables.scss

Tables

Basic table can be created by using class .table on standard HTML table.

Example:code
No. Lorem Ipsum Dolor
1 Et fugiat Voluptate dolore 979
2 Quis deserunt Aliqua sint laboris ut 814
3 Voluptate dolore Aliqua sint laboris ut 436
Code:
<table class="table">
  ...
</table>

Bordered

To create bordered version of table simple ad additional class .table-bordered.

Example:code
No. Lorem Ipsum Dolor
1 Et fugiat Voluptate dolore 979
2 Quis deserunt Aliqua sint laboris ut 814
3 Voluptate dolore Aliqua sint laboris ut 436
Code:
<table class="table table-bordered">
  ...
</table>

Striped

To create striped version of table simple ad additional class .table-striped.

Example:code
No. Lorem Ipsum Dolor
1 Et fugiat Voluptate dolore 979
2 Quis deserunt Aliqua sint laboris ut 814
3 Voluptate dolore Aliqua sint laboris ut 436
Code:
<table class="table table-striped">
  ...
</table>

Clean

To create clean no bordered version of table simple ad additional class .table-clean.

Example:code
1 Et fugiat Voluptate dolore 979
2 Quis deserunt Aliqua sint laboris ut 814
3 Voluptate dolore Aliqua sint laboris ut 436
Code:
<table class="table table-clean">
  ...
</table>

Scrollable table

To create a table that can be scrolled horizontally, wrap it in .table-scrollable. Once the table contents are wider than the available space, the overflow will be hidden, but scrollable.

Example:code
1 Et fugiat Voluptate dolore 979 1 Et fugiat Voluptate dolore 979 1 Et fugiat Voluptate dolore 979 1 Et fugiat Voluptate dolore 979
2 Quis deserunt Aliqua sint laboris ut 814 2 Quis deserunt Aliqua sint laboris ut 814 2 Quis deserunt Aliqua sint laboris ut 814 2 Quis deserunt Aliqua sint laboris ut 814
3 Voluptate dolore Aliqua sint laboris ut 436 3 Voluptate dolore Aliqua sint laboris ut 436 3 Voluptate dolore Aliqua sint laboris ut 436 3 Voluptate dolore Aliqua sint laboris ut 436
Code:
<div class="table-scrollable">
  <table class="table">
    ...
  </table>
</div>

Prototypes

Here you can find some examples of tables used in prototypes.

Example:
IZBA ŠTANDART HOSTIA CENA

Apartman

Posteľ
2 dvojposteľ + 1 prístelok
Vybavenie:
  • Flat -screen
  • TV Klimatizácia
  • Vlastná kúpeľňa
  • Wifi zdarma

4x dospelí
1x dieťa

(do 8 rokov)

220€

Cena izby 3 noci 4x dospelí, 1 dieťa

Apartman

Posteľ
2 dvojposteľ + 1 prístelok
Vybavenie:
  • Flat -screen
  • TV Klimatizácia
  • Vlastná kúpeľňa
  • Wifi zdarma

4x dospelí
1x dieťa

(do 8 rokov)

220€

Cena izby 3 noci 4x dospelí, 1 dieťa
Code: