The width of the columns can be set using the CSS variable --width, e.g. <th style="--width: 50%";> or <td style="--width: 5ch;">
On mobile, tables are output in a serialised format (“Stacked Table Layout”), where the table header is hidden and the cell contents each receive their own label:
data-col (the data attribute must be repeated for each cell).data-col.
<!-- Default -->
<table class="table" data-highlight=" ">
<caption class="table-caption">Table Caption</caption>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
</table>
<!-- With Header -->
<table class="table" data-highlight=" ">
<caption class="table-caption">Table Caption</caption>
<thead class="table-thead">
<tr class="table-tr">
<th class="table-th" scope="col">
Countries
</th>
<th class="table-th" scope="col">
Capital
</th>
<th class="table-th" scope="col">
Languages
</th>
<th class="table-th" scope="col">
Population
</th>
</tr>
</thead>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
</table>
<!-- With Footer -->
<table class="table" data-highlight=" ">
<caption class="table-caption">Table Caption</caption>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
<tfoot class="table-tfoot">
<tr class="table-tr">
<th class="table-th" scope="col">
Totals
</th>
<th class="table-th" scope="col">
</th>
<th class="table-th" scope="col">
</th>
<th class="table-th" scope="col" data-column="Total Population">
1819 million
</th>
</tr>
</tfoot>
</table>
<!-- With Header And Footer -->
<table class="table" data-highlight=" ">
<caption class="table-caption">Table Caption</caption>
<thead class="table-thead">
<tr class="table-tr">
<th class="table-th" scope="col">
Countries
</th>
<th class="table-th" scope="col">
Capital
</th>
<th class="table-th" scope="col">
Languages
</th>
<th class="table-th" scope="col">
Population
</th>
</tr>
</thead>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
<tfoot class="table-tfoot">
<tr class="table-tr">
<th class="table-th" scope="col">
Totals
</th>
<th class="table-th" scope="col">
</th>
<th class="table-th" scope="col">
</th>
<th class="table-th" scope="col" data-column="Total Population">
1819 million
</th>
</tr>
</tfoot>
</table>
<!-- Highlight Row -->
<table class="table" data-highlight="row ">
<caption class="table-caption">Table Caption</caption>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
</table>
<!-- Highlight Column -->
<table class="table" data-highlight=" column">
<caption class="table-caption">Table Caption</caption>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
</table>
<!-- Highlight Cell -->
<table class="table" data-highlight="row column">
<caption class="table-caption">Table Caption</caption>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
</table>
<!-- Documentation only -->
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Default</h2>
<div class="doc-variant-configuration">
</div>
</header>
<table class="table" data-highlight=" ">
<caption class="table-caption">Table Caption</caption>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
</table>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">With Header</h2>
<div class="doc-variant-configuration">
</div>
</header>
<table class="table" data-highlight=" ">
<caption class="table-caption">Table Caption</caption>
<thead class="table-thead">
<tr class="table-tr">
<th class="table-th" scope="col">
Countries
</th>
<th class="table-th" scope="col">
Capital
</th>
<th class="table-th" scope="col">
Languages
</th>
<th class="table-th" scope="col">
Population
</th>
</tr>
</thead>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
</table>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">With Header and Footer</h2>
<div class="doc-variant-configuration">
</div>
</header>
<table class="table" data-highlight=" ">
<caption class="table-caption">Table Caption</caption>
<thead class="table-thead">
<tr class="table-tr">
<th class="table-th" scope="col">
Countries
</th>
<th class="table-th" scope="col">
Capital
</th>
<th class="table-th" scope="col">
Languages
</th>
<th class="table-th" scope="col">
Population
</th>
</tr>
</thead>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
<tfoot class="table-tfoot">
<tr class="table-tr">
<th class="table-th" scope="col">
Totals
</th>
<th class="table-th" scope="col">
</th>
<th class="table-th" scope="col">
</th>
<th class="table-th" scope="col" data-column="Total Population">
1819 million
</th>
</tr>
</tfoot>
</table>
</section>
<!-- Default -->
<table class="table{{#modifier}} {{.}}{{/modifier}}" data-highlight="{{#if highlight-row}}row{{/if}} {{#if highlight-column}}column{{/if}}" {{#if header}}{{#unless caption}} data-pull-upwards="true"{{/unless}}{{/if}}>
{{#caption}}
<caption class="table-caption">{{{.}}}</caption>
{{/caption}}
{{#header}}
<thead class="table-thead">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col">
{{{data}}}
</th>
{{/cells}}
</tr>
</thead>
{{/header}}
<tbody class="table-tbody">
{{#rows}}
<tr class="table-tr">
{{#cells}}
{{#is-head}}<th class="table-th" scope="row"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}{{^is-head}}<td class="table-td"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}
{{{data}}}
{{#is-head}}</th>{{/is-head}}{{^is-head}}</td>{{/is-head}}
{{/cells}}
</tr>
{{/rows}}
</tbody>
{{#footer}}
<tfoot class="table-tfoot">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col"{{#column}} data-column="{{{.}}}"{{/column}}>
{{{data}}}
</th>
{{/cells}}
</tr>
</tfoot>
{{/footer}}
</table>
<!-- With Header -->
<table class="table{{#modifier}} {{.}}{{/modifier}}" data-highlight="{{#if highlight-row}}row{{/if}} {{#if highlight-column}}column{{/if}}" {{#if header}}{{#unless caption}} data-pull-upwards="true"{{/unless}}{{/if}}>
{{#caption}}
<caption class="table-caption">{{{.}}}</caption>
{{/caption}}
{{#header}}
<thead class="table-thead">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col">
{{{data}}}
</th>
{{/cells}}
</tr>
</thead>
{{/header}}
<tbody class="table-tbody">
{{#rows}}
<tr class="table-tr">
{{#cells}}
{{#is-head}}<th class="table-th" scope="row"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}{{^is-head}}<td class="table-td"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}
{{{data}}}
{{#is-head}}</th>{{/is-head}}{{^is-head}}</td>{{/is-head}}
{{/cells}}
</tr>
{{/rows}}
</tbody>
{{#footer}}
<tfoot class="table-tfoot">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col"{{#column}} data-column="{{{.}}}"{{/column}}>
{{{data}}}
</th>
{{/cells}}
</tr>
</tfoot>
{{/footer}}
</table>
<!-- With Footer -->
<table class="table{{#modifier}} {{.}}{{/modifier}}" data-highlight="{{#if highlight-row}}row{{/if}} {{#if highlight-column}}column{{/if}}" {{#if header}}{{#unless caption}} data-pull-upwards="true"{{/unless}}{{/if}}>
{{#caption}}
<caption class="table-caption">{{{.}}}</caption>
{{/caption}}
{{#header}}
<thead class="table-thead">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col">
{{{data}}}
</th>
{{/cells}}
</tr>
</thead>
{{/header}}
<tbody class="table-tbody">
{{#rows}}
<tr class="table-tr">
{{#cells}}
{{#is-head}}<th class="table-th" scope="row"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}{{^is-head}}<td class="table-td"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}
{{{data}}}
{{#is-head}}</th>{{/is-head}}{{^is-head}}</td>{{/is-head}}
{{/cells}}
</tr>
{{/rows}}
</tbody>
{{#footer}}
<tfoot class="table-tfoot">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col"{{#column}} data-column="{{{.}}}"{{/column}}>
{{{data}}}
</th>
{{/cells}}
</tr>
</tfoot>
{{/footer}}
</table>
<!-- With Header And Footer -->
<table class="table{{#modifier}} {{.}}{{/modifier}}" data-highlight="{{#if highlight-row}}row{{/if}} {{#if highlight-column}}column{{/if}}" {{#if header}}{{#unless caption}} data-pull-upwards="true"{{/unless}}{{/if}}>
{{#caption}}
<caption class="table-caption">{{{.}}}</caption>
{{/caption}}
{{#header}}
<thead class="table-thead">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col">
{{{data}}}
</th>
{{/cells}}
</tr>
</thead>
{{/header}}
<tbody class="table-tbody">
{{#rows}}
<tr class="table-tr">
{{#cells}}
{{#is-head}}<th class="table-th" scope="row"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}{{^is-head}}<td class="table-td"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}
{{{data}}}
{{#is-head}}</th>{{/is-head}}{{^is-head}}</td>{{/is-head}}
{{/cells}}
</tr>
{{/rows}}
</tbody>
{{#footer}}
<tfoot class="table-tfoot">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col"{{#column}} data-column="{{{.}}}"{{/column}}>
{{{data}}}
</th>
{{/cells}}
</tr>
</tfoot>
{{/footer}}
</table>
<!-- Highlight Row -->
<table class="table{{#modifier}} {{.}}{{/modifier}}" data-highlight="{{#if highlight-row}}row{{/if}} {{#if highlight-column}}column{{/if}}" {{#if header}}{{#unless caption}} data-pull-upwards="true"{{/unless}}{{/if}}>
{{#caption}}
<caption class="table-caption">{{{.}}}</caption>
{{/caption}}
{{#header}}
<thead class="table-thead">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col">
{{{data}}}
</th>
{{/cells}}
</tr>
</thead>
{{/header}}
<tbody class="table-tbody">
{{#rows}}
<tr class="table-tr">
{{#cells}}
{{#is-head}}<th class="table-th" scope="row"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}{{^is-head}}<td class="table-td"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}
{{{data}}}
{{#is-head}}</th>{{/is-head}}{{^is-head}}</td>{{/is-head}}
{{/cells}}
</tr>
{{/rows}}
</tbody>
{{#footer}}
<tfoot class="table-tfoot">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col"{{#column}} data-column="{{{.}}}"{{/column}}>
{{{data}}}
</th>
{{/cells}}
</tr>
</tfoot>
{{/footer}}
</table>
<!-- Highlight Column -->
<table class="table{{#modifier}} {{.}}{{/modifier}}" data-highlight="{{#if highlight-row}}row{{/if}} {{#if highlight-column}}column{{/if}}" {{#if header}}{{#unless caption}} data-pull-upwards="true"{{/unless}}{{/if}}>
{{#caption}}
<caption class="table-caption">{{{.}}}</caption>
{{/caption}}
{{#header}}
<thead class="table-thead">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col">
{{{data}}}
</th>
{{/cells}}
</tr>
</thead>
{{/header}}
<tbody class="table-tbody">
{{#rows}}
<tr class="table-tr">
{{#cells}}
{{#is-head}}<th class="table-th" scope="row"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}{{^is-head}}<td class="table-td"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}
{{{data}}}
{{#is-head}}</th>{{/is-head}}{{^is-head}}</td>{{/is-head}}
{{/cells}}
</tr>
{{/rows}}
</tbody>
{{#footer}}
<tfoot class="table-tfoot">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col"{{#column}} data-column="{{{.}}}"{{/column}}>
{{{data}}}
</th>
{{/cells}}
</tr>
</tfoot>
{{/footer}}
</table>
<!-- Highlight Cell -->
<table class="table{{#modifier}} {{.}}{{/modifier}}" data-highlight="{{#if highlight-row}}row{{/if}} {{#if highlight-column}}column{{/if}}" {{#if header}}{{#unless caption}} data-pull-upwards="true"{{/unless}}{{/if}}>
{{#caption}}
<caption class="table-caption">{{{.}}}</caption>
{{/caption}}
{{#header}}
<thead class="table-thead">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col">
{{{data}}}
</th>
{{/cells}}
</tr>
</thead>
{{/header}}
<tbody class="table-tbody">
{{#rows}}
<tr class="table-tr">
{{#cells}}
{{#is-head}}<th class="table-th" scope="row"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}{{^is-head}}<td class="table-td"{{#width}} style="--width: {{.}}"{{/width}}{{#column}} data-column="{{{.}}}"{{/column}}>{{/is-head}}
{{{data}}}
{{#is-head}}</th>{{/is-head}}{{^is-head}}</td>{{/is-head}}
{{/cells}}
</tr>
{{/rows}}
</tbody>
{{#footer}}
<tfoot class="table-tfoot">
<tr class="table-tr">
{{#cells}}
<th class="table-th" scope="col"{{#column}} data-column="{{{.}}}"{{/column}}>
{{{data}}}
</th>
{{/cells}}
</tr>
</tfoot>
{{/footer}}
</table>
<!-- Documentation only -->
{{#variants}}
<section class="doc-variant">
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
</header>
{{#variant}}
{{render '@table' (contextData '@table' this) merge=true}}
{{/variant}}
</section>
{{/variants}}
/* Default */
{
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
]
}
/* With Header */
{
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
],
"header": {
"cells": [
{
"data": "Countries"
},
{
"data": "Capital"
},
{
"data": "Languages"
},
{
"data": "Population"
}
]
}
}
/* With Footer */
{
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
],
"footer": {
"cells": [
{
"data": "Totals"
},
{
"data": null
},
{
"data": null
},
{
"column": "Total Population",
"data": "1819 million"
}
]
}
}
/* With Header And Footer */
{
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
],
"header": {
"cells": [
{
"data": "Countries"
},
{
"data": "Capital"
},
{
"data": "Languages"
},
{
"data": "Population"
}
]
},
"footer": {
"cells": [
{
"data": "Totals"
},
{
"data": null
},
{
"data": null
},
{
"column": "Total Population",
"data": "1819 million"
}
]
}
}
/* Highlight Row */
{
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
],
"highlight-row": true
}
/* Highlight Column */
{
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
],
"highlight-column": true
}
/* Highlight Cell */
{
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
],
"highlight-column": true,
"highlight-row": true
}
/* Documentation only */
{
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
],
"variants": [
{
"title": "Default",
"variant": {
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
]
}
},
{
"title": "With Header",
"variant": {
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
],
"header": {
"cells": [
{
"data": "Countries"
},
{
"data": "Capital"
},
{
"data": "Languages"
},
{
"data": "Population"
}
]
}
}
},
{
"title": "With Header and Footer",
"variant": {
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
],
"header": {
"cells": [
{
"data": "Countries"
},
{
"data": "Capital"
},
{
"data": "Languages"
},
{
"data": "Population"
}
]
},
"footer": {
"cells": [
{
"data": "Totals"
},
{
"data": null
},
{
"data": null
},
{
"column": "Total Population",
"data": "1819 million"
}
]
}
}
}
]
}
$table_caption_styles: () !default;
$table_head_border: var(--bw) solid $_accent-color !default;
$table_row_border: false !default;
$table_background-color--hover: $_gray-200 !default;
@import "_table.settings";
@import "_table.styles";
%table {
&-caption {
@extend %heading;
@include stack-spacing(large, margin-bottom);
}
&-thead {
border-bottom: none;
}
&-tbody {
border-top: $table_head_border;
@include text-size(small);
}
}
.table {
@include not-on-mobile() {
&-caption {
@include stack-spacing(large, margin-bottom);
}
}
}
$table_color: $_text-color !default;
$table_caption_styles: (
text-size: large,
font-weight: $_font-weight--bold,
) !default;
$table_label_styles: (
text-size: smallest,
font-weight: $_font-weight,
color: $_minor-color,
) !default;
$table_padding: .5rem .75rem !default;
$table_head_border: 2px solid $_text-color !default;
$table_foot_border: $table_head_border !default;
$table_row_border: 1px solid $_text-color !default; // Set to `false` to remove border
$table_row_background-color: transparent !default;
$table_row_background-color--alt: $_backdrop-color--transparent !default; // Set to `false` to remove alternating background
$table_background-color--hover: $_lightgray !default;
$table_color--hover: $table_color !default; // Not supported when highlighting columns
%table {
table-layout: auto;
border-collapse: collapse;
width: 100%;
text-align: left;
&-caption {
display: table-caption;
margin-top: 0;
text-align: left;
@include stack-spacing(default, margin-bottom);
@include styles($table_caption_styles);
}
&-tr {
@if $table_row_background-color--alt != false {
background-color: $table_row_background-color--alt;
&:nth-child(even) {
background-color: $table_row_background-color;
}
} @else {
background-color: $table_row_background-color;
}
}
&-th,
&-td {
padding: $table_padding;
vertical-align: top;
color: $table_color;
> *:first-child {
margin-top: 0;
}
@if $table_row_border != false {
border-bottom: $table_row_border;
}
}
&-th {
font-weight: $_font-weight--bold;
}
&-thead {
display: table-header-group;
@include stack-spacing(0);
border-bottom: $table_head_border;
font-weight: $_font-weight--bold;
}
&-thead & {
&-tr {
background-color: $table_row_background-color !important;
}
&-th,
&-td {
padding-bottom: (.5 * nth($table_padding, 1));
padding-top: 0;
font-weight: inherit;
}
}
&-tbody {
@include stack-spacing(0);
}
@if $table_row_border != false {
&-tbody &-tr:first-child & {
&-th,
&-td {
border-top: $table_row_border;
}
}
}
&-thead + &-tbody & {
&-tr {
@if $table_row_background-color--alt != false {
background-color: $table_row_background-color;
&:nth-child(odd) {
background-color: $table_row_background-color--alt;
}
}
}
}
&-tfoot {
font-weight: $_font-weight--bold;
border-top: $table_foot_border;
}
&-tfoot & {
&-tr {
background-color: $table_row_background-color !important;
}
&-th,
&-td {
padding-top: (.5 * nth($table_padding, 1));
padding-bottom: 0;
font-weight: inherit;
}
}
@include not-on-mobile(){
&-th, &-td {
width: auto;
}
}
@include only-on-mobile(){
@include stack-spacing(component);
&-caption {
padding: 0;
@include stack-spacing(default, margin-bottom);
}
&-th, &-td {
padding: 0;
border: none !important;
display: block;
@include stack-spacing(small, padding-top);
&:last-child {
@include stack-spacing(small, padding-bottom);
}
&[data-column] {
&::before {
content: attr(data-column);
display: block;
@include styles($table_label_styles);
}
}
}
&-tr {
background-color: $table_row_background-color !important;
@if $table_row_border != false {
border-bottom: $table_row_border;
&:first-child {
border-top: $table_row_border;
}
}
}
&-thead {
display: none;
}
&-tfoot &-tr {
border-top: $table_head_border;
border-bottom: none;
}
&-tfoot &-th,
&-tfoot &-td {
@include stack-spacing(small);
padding: 0;
&:not([data-column]) {
display: none;
}
}
@if $table_row_background-color--alt != false {
&-tr &-th,
&-tr &-td {
@include stack-spacing(small, padding-inline);
}
&-tbody &-tr:nth-child(odd) {
background-color: $table_row_background-color--alt !important;
}
}
&:not(:has(#{&-thead})) &-tbody &-tr:first-child {
border-top: $table_head_border;
}
&:not(:has(#{&-tfoot})) &-tbody &-tr:last-child {
border-bottom: $table_head_border;
}
}
&[data-highlight*="row"] {
%table-tr {
transition: $_transition-duration;
transition-property: background-color, color;
&:hover {
background-color: $table_background-color--hover;
color: $table_color--hover;
transition-duration: $_transition-duration--in;
}
}
}
&[data-highlight*="column"] {
/*
* FIXME: CSS-only version is very hacky and does not support changes of text color;
* If needed, it should be solved using JavaScript
*/
overflow: hidden;
position: relative;
z-index: 1;
%table {
&-caption {
@include stack-spacing(0, margin-bottom);
@include stack-spacing(default, padding-bottom);
background-color: $_page-color;
}
&-th,
&-td {
position: relative;
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 200vh;
transform: translateY(-50%);
transition: background-color $_transition-duration--in;
transition-delay: 50ms;
}
&:hover::after {
background-color: $table_background-color--hover;
transition-duration: $_transition-duration--in;
transition-delay: 0s;
}
}
}
}
caption {
@extend %table-caption;
}
thead {
@extend %table-thead;
}
tbody {
@extend %table-tbody;
}
tfoot {
@extend %table-tfoot;
}
tr {
@extend %table-tr;
}
th {
@extend %table-th;
}
td {
@extend %table-td;
}
}
.table {
@extend %table;
&-caption {
@extend %table-caption;
}
&-thead {
@extend %table-thead;
}
&-tbody {
@extend %table-tbody;
}
&-tfoot {
@extend %table-tfoot;
}
&-tr {
@extend %table-tr;
}
&-th {
@extend %table-th;
}
&-td {
@extend %table-td;
}
}