Tables
# Default Table
You don't need to add any class name to default table.
# | City | Country | Population |
---|---|---|---|
1 | Warsaw | Poland | 1,732,707 |
2 | Berlin | Germany | 3,562,166 |
3 | London | United Kingdom | 8,416,535 |
# Bordered table
# | City | Country | Population |
---|---|---|---|
1 | Warsaw | Poland | 1,732,707 |
2 | Berlin | Germany | 3,562,166 |
3 | London | United Kingdom | 8,416,535 |
# Natural wide bordered table
# | City | Country | Population |
---|---|---|---|
1 | Warsaw | Poland | 1,732,707 |
2 | Berlin | Germany | 3,562,166 |
3 | London | United Kingdom | 8,416,535 |
# Striped table
# | City | Country | Population |
---|---|---|---|
1 | Warsaw | Poland | 1,732,707 |
2 | Berlin | Germany | 3,562,166 |
3 | London | United Kingdom | 8,416,535 |
# RWD table on $mobile
devices
# | City | Country | Population |
---|---|---|---|
1 | Warsaw | Poland | 1,732,707 |
2 | Berlin | Germany | 3,562,166 |
3 | London | United Kingdom | 8,416,535 |
# CSS driven table
By default CSS table inherit width of cells from grid columns, use .table--auto-size
class to set automatic width of cell based on cell content.
#
City
Country
Population
1
Warsaw
Poland
1,732,707
2
Berlin
Germany
3,562,166
3
London
United Kingdom
8,416,535
# Clean table
You can use clsss .table--clean
to remove default padding and borders.
If you need simple css driven table without grid, you can omit grid columns classes and use simple div
as col.
#
City
Country
Population
1
Warsaw
Poland
1,732,707
2
Berlin
Germany
3,562,166
3
London
United Kingdom
8,416,535