--- title: Table layout: documentation doc-tab: elements doc-subtab: table variables: - name: $table-color value: $grey-darker - name: $table-background-color value: $white - name: $table-cell-border value: 1px solid $grey-lighter - name: $table-cell-border-width value: 0 0 1px - name: $table-cell-padding value: 0.5em 0.75em - name: $table-cell-heading-color value: $text-strong - name: $table-head-color value: $grey - name: $table-head-cell-border-width value: 0 0 2px - name: $table-head-cell-color value: $text-strong - name: $table-foot-cell-border-width value: 2px 0 0 - name: $table-foot-cell-color value: $text-strong - name: $table-row-hover-background-color value: $white-bis - name: $table-row-active-background-color value: $primary - name: $table-row-active-color value: $primary-invert - name: $table-striped-row-even-background-color value: $white-bis - name: $table-striped-row-even-hover-background-color value: $white-ter --- {% capture table_example %}
Pos Team Pld W D L GF GA GD Pts Qualification or relegation
Pos Team Pld W D L GF GA GD Pts Qualification or relegation
1 Leicester City (C) 38 23 12 3 68 36 +32 81 Qualification for the Champions League group stage
2 Arsenal 38 20 11 7 65 36 +29 71 Qualification for the Champions League group stage
3 Tottenham Hotspur 38 19 13 6 69 35 +34 70 Qualification for the Champions League group stage
4 Manchester City 38 19 9 10 71 41 +30 66 Qualification for the Champions League play-off round
5 Manchester United 38 19 9 10 49 35 +14 66 Qualification for the Europa League group stage
6 Southampton 38 18 9 11 59 41 +18 63 Qualification for the Europa League group stage
7 West Ham United 38 16 14 8 65 51 +14 62 Qualification for the Europa League third qualifying round
8 Liverpool 38 16 12 10 63 50 +13 60
9 Stoke City 38 14 9 15 41 55 −14 51
10 Chelsea 38 12 14 12 59 53 +6 50
11 Everton 38 11 14 13 59 55 +4 47
12 Swansea City 38 12 11 15 42 52 −10 47
13 Watford 38 12 9 17 40 50 −10 45
14 West Bromwich Albion 38 10 13 15 34 48 −14 43
15 Crystal Palace 38 11 9 18 39 51 −12 42
16 AFC Bournemouth 38 11 9 18 45 67 −22 42
17 Sunderland 38 9 12 17 48 62 −14 39
18 Newcastle United (R) 38 9 10 19 44 65 −21 37 Relegation to the Football League Championship
19 Norwich City (R) 38 9 7 22 39 67 −28 34 Relegation to the Football League Championship
20 Aston Villa (R) 38 3 8 27 27 76 −49 17 Relegation to the Football League Championship
{% endcapture %} {% include subnav-elements.html %}

Tables

The inevitable HTML table, with special case cells

{% include meta.html colors=false sizes=false variables=true %}

You simply need to attach a single .table CSS class on a <table> with the following structure:

  • table the main container
    • thead the optional top part of the table
    • tfoot the optional bottom part of the table
    • tbody the main content of the table
      • tr each table row
        • th a table cell heading
        • td a table cell

New! 0.4.2

You can set a table row as selected by appending the is-selected modifier on a <tr>

{{table_example}}
{% highlight html %}{{table_example}}{% endhighlight %}

Modifiers

Add borders to all the cells.

table is-bordered
One Two
Three Four

Add stripes to the table.

table is-striped
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

Make the cells narrower.

table is-narrow
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

You can have a fullwidth table.

table is-fullwidth
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

You can combine all four modifiers.

table is-bordered is-striped is-narrow is-fullwidth
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve
{% include variables.html element=true %}