<div class="row no-gutters">
<div class="grid">
<div class="table-scroll-wrapper js-table-scroll-wrapper scroll-on-large u-m-b-double table-scroll-wrapper--report-upload alignwide">
<div class="scroll-indicator"></div>
<div class="table-container js-table-container">
<table class="m-table js-table m-table--sticky-first m-table--colored-cells" data-table-layout="scroll-target sticky-first">
<colgroup>
<col style="width: 10rem">
<col span="9">
</colgroup>
<thead>
<tr>
<th rowspan="2">Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)</th>
<th class="u-nowrap" colspan="9">Generation:</th>
</tr>
<tr>
<th>Total</th>
<th class="u-nowrap">20-/30-/40-talister</th>
<th class="u-nowrap">50-talister</th>
<th class="u-nowrap">60-talister</th>
<th class="u-nowrap">70-talister</th>
<th class="u-nowrap">80-talister</th>
<th class="u-nowrap">90-talister</th>
<th class="u-nowrap">00-talister</th>
<th class="u-nowrap">10-talister</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Youtube</th>
<td>77%</td>
<td class="background-ruby-light">38%</td>
<td class="background-ruby-light">62%</td>
<td class="background-ruby-light">73%</td>
<td>80%</td>
<td class="background-jade-light">83%</td>
<td class="background-jade-light">93%</td>
<td class="background-jade-light">93%</td>
<td>81%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Facebook</th>
<td>69%</td>
<td class="background-ruby-light">58%</td>
<td>70%</td>
<td class="background-jade-light">77%</td>
<td class="background-jade-light">82%</td>
<td class="background-jade-light">83%</td>
<td class="background-jade-light">85%</td>
<td>68%</td>
<td class="background-ruby-light">9%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Instagram</th>
<td>66%</td>
<td class="background-ruby-light">40%</td>
<td class="background-ruby-light">50%</td>
<td>67%</td>
<td class="background-jade-light">76%</td>
<td class="background-jade-light">75%</td>
<td class="background-jade-light">82%</td>
<td class="background-jade-light">87%</td>
<td class="background-ruby-light">31%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Snapchat</th>
<td>38%</td>
<td class="background-ruby-light">6%</td>
<td class="background-ruby-light">9%</td>
<td class="background-ruby-light">20%</td>
<td class="background-ruby-light">33%</td>
<td class="background-ruby-light">30%</td>
<td>58%</td>
<td class="background-jade-light">89%</td>
<td class="background-jade-light">47%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Linkedin</th>
<td>27%</td>
<td class="background-ruby-light">5%</td>
<td class="background-ruby-light">13%</td>
<td class="background-jade-light">31%</td>
<td class="background-jade-light">41%</td>
<td class="background-jade-light">42%</td>
<td class="background-jade-light">45%</td>
<td class="background-ruby-light">23%</td>
<td class="background-ruby-light">0%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Tiktok</th>
<td>22%</td>
<td class="background-ruby-light">2%</td>
<td class="background-ruby-light">5%</td>
<td class="background-ruby-light">7%</td>
<td class="background-ruby-light">12%</td>
<td class="background-ruby-light">10%</td>
<td>27%</td>
<td class="background-jade-light">69%</td>
<td class="background-jade-light">35%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Flashback</th>
<td>20%</td>
<td class="background-ruby-light">5%</td>
<td class="background-ruby-light">15%</td>
<td>22%</td>
<td class="background-jade-light">33%</td>
<td class="background-jade-light">29%</td>
<td class="background-jade-light">31%</td>
<td class="background-ruby-light">13%</td>
<td class="background-ruby-light">1%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Pinterest</th>
<td>18%</td>
<td class="background-ruby-light">3%</td>
<td class="background-ruby-light">13%</td>
<td>14%</td>
<td>17%</td>
<td>15%</td>
<td class="background-jade-light">26%</td>
<td class="background-jade-light">31%</td>
<td>15%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Reddit</th>
<td>16%</td>
<td class="background-ruby-light">0%</td>
<td class="background-ruby-light">1%</td>
<td class="background-ruby-light">3%</td>
<td class="background-ruby-light">10%</td>
<td>22%</td>
<td class="background-jade-light">36%</td>
<td class="background-jade-light">37%</td>
<td class="background-ruby-light">4%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">X/Twitter</th>
<td>13%</td>
<td class="background-ruby-light">3%</td>
<td class="background-ruby-light">5%</td>
<td>11%</td>
<td>11%</td>
<td class="background-jade-light">16%</td>
<td class="background-jade-light">23%</td>
<td class="background-jade-light">25%</td>
<td class="background-ruby-light">2%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Roblox</th>
<td>9%</td>
<td class="background-ruby-light">0%</td>
<td class="background-ruby-light">0%</td>
<td class="background-ruby-light">0%</td>
<td class="background-ruby-light">1%</td>
<td class="background-ruby-light">1%</td>
<td class="background-ruby-light">1%</td>
<td class="background-jade-light">15%</td>
<td class="background-jade-light">62%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Threads</th>
<td>7%</td>
<td class="background-ruby-light">2%</td>
<td class="background-ruby-light">6%</td>
<td class="background-ruby-light">7%</td>
<td>8%</td>
<td class="background-jade-light">11%</td>
<td class="background-jade-light">10%</td>
<td>9%</td>
<td class="background-ruby-light">0%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Twitch</th>
<td>6%</td>
<td class="background-ruby-light">0%</td>
<td class="background-ruby-light">0%</td>
<td class="background-ruby-light">0%</td>
<td class="background-ruby-light">2%</td>
<td>6%</td>
<td class="background-jade-light">14%</td>
<td class="background-jade-light">16%</td>
<td class="background-ruby-light">4%</td>
</tr>
<tr>
<th scope="row" data-label="Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)">Bluesky</th>
<td>2%</td>
<td class="background-ruby-light">1%</td>
<td class="background-ruby-light">1%</td>
<td>2%</td>
<td>3%</td>
<td class="background-jade-light">5%</td>
<td>3%</td>
<td>2%</td>
<td class="background-ruby-light">0%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="grid">
{{#if scrollable}}
<div class="table-scroll-wrapper js-table-scroll-wrapper scroll-on-large u-m-b-double{{#if scrollWrapperClass}} {{scrollWrapperClass}}{{/if}}">
<div class="scroll-indicator"></div>
{{/if}}
<div class="table-container js-table-container">
<table class="m-table js-table{{#if modifier}} {{modifier}}{{/if}}" data-table-layout="scroll-target{{#if stickyFirst}} sticky-first{{/if}}">
{{#if columnWidths}}
<colgroup>
{{#each columnWidths}}
<col{{#if width}} style="width: {{width}}"{{/if}}{{#if span}} span="{{span}}"{{/if}}>
{{/each}}
</colgroup>
{{/if}}
{{#if captionText}}
<caption>{{captionText}}</caption>
{{else}}
{{#if caption}}
<caption>{{caption}}</caption>
{{/if}}
{{/if}}
{{#if headerRows}}
<thead>
{{#each headerRows}}
<tr>
{{#each cells}}
<th{{#if className}} class="{{className}}"{{/if}}{{#if scope}} scope="{{scope}}"{{/if}}{{#if colspan}} colspan="{{colspan}}"{{/if}}{{#if rowspan}} rowspan="{{rowspan}}"{{/if}}>{{{label}}}</th>
{{/each}}
</tr>
{{/each}}
</thead>
{{else}}
{{#if headers}}
<thead>
<tr>
{{#each headers}}
{{#if label}}
<th{{#if className}} class="{{className}}"{{/if}}{{#if scope}} scope="{{scope}}"{{/if}}{{#if colspan}} colspan="{{colspan}}"{{/if}}>{{{label}}}</th>
{{else}}
<th>{{this}}</th>
{{/if}}
{{/each}}
</tr>
</thead>
{{else}}
{{#unless rows}}
{{#unless increment}}
<thead>
<tr>
<th>{{th}}</th>
<th>{{th}}</th>
<th>{{th}}</th>
<th>{{th}}</th>
<th>{{th}}</th>
</tr>
</thead>
{{/unless}}
{{/unless}}
{{/if}}
{{/if}}
<tbody>
{{#if rows}}
{{#each rows}}
{{#if title}}
<tr{{#if className}} class="{{className}}"{{/if}}>
{{#if ../increment}}<th> </th>{{/if}}
<td data-row-header="true">
{{#if href}}
<a href="{{href}}">{{title}}</a>
{{else}}
{{title}}
{{/if}}
</td>
{{#each cells}}
<td>{{{this}}}</td>
{{/each}}
</tr>
{{else}}
<tr{{#if className}} class="{{className}}"{{/if}}>
{{#each cells}}
{{#if isHeader}}
<th{{#if className}} class="{{className}}"{{/if}}{{#if scope}} scope="{{scope}}"{{/if}}{{#if colspan}} colspan="{{colspan}}"{{/if}}{{#if dataLabel}} data-label="{{dataLabel}}"{{/if}}>{{{content}}}</th>
{{else}}
<td{{#if className}} class="{{className}}"{{/if}}{{#if colspan}} colspan="{{colspan}}"{{/if}}{{#if dataLabel}} data-label="{{dataLabel}}"{{/if}}>{{{content}}}</td>
{{/if}}
{{/each}}
</tr>
{{/if}}
{{/each}}
{{else}}
<tr>
{{#if increment}}<th> </th>{{/if}}
<td><a href="#">{{td}}</a></td>
<td>{{td_num1}} <small>{{td_unit1}}</small></td>
<td>{{td_num2}} <small>{{td_unit2}}</small></td>
<td>{{td_num3}} <small>{{td_unit3}}</small></td>
<td>{{td_num4}} <small>{{td_unit4}}</small></td>
</tr>
<tr>
{{#if increment}}<th> </th>{{/if}}
<td><a href="#">{{td}}</a></td>
<td>{{td_num1}} <small>{{td_unit1}}</small></td>
<td>{{td_num2}} <small>{{td_unit2}}</small></td>
<td>{{td_num3}} <small>{{td_unit3}}</small></td>
<td>{{td_num4}} <small>{{td_unit4}}</small></td>
</tr>
<tr>
{{#if increment}}<th> </th>{{/if}}
<td><a href="#">{{td}}</a></td>
<td>{{td_num1}} <small>{{td_unit1}}</small></td>
<td>{{td_num2}} <small>{{td_unit2}}</small></td>
<td>{{td_num3}} <small>{{td_unit3}}</small></td>
<td>{{td_num4}} <small>{{td_unit4}}</small></td>
</tr>
<tr>
{{#if increment}}<th> </th>{{/if}}
<td><a href="#">{{td}}</a></td>
<td>{{td_num1}} <small>{{td_unit1}}</small></td>
<td>{{td_num2}} <small>{{td_unit2}}</small></td>
<td>{{td_num3}} <small>{{td_unit3}}</small></td>
<td>{{td_num4}} <small>{{td_unit4}}</small></td>
</tr>
{{/if}}
</tbody>
{{#if footer}}
<tfoot>
<tr>
{{#each footer}}
{{#if label}}
<td{{#if className}} class="{{className}}"{{/if}}{{#if colspan}} colspan="{{colspan}}"{{/if}}>{{{label}}}</td>
{{else}}
<td>{{this}}</td>
{{/if}}
{{/each}}
</tr>
</tfoot>
{{/if}}
</table>
</div>
{{#if scrollable}}
</div>
{{/if}}
</div>
</div>
{
"headers": [
"Plan",
"Monthly cost",
"Bandwidth",
"Domains included",
"Contract"
],
"rows": [
{
"cells": [
{
"content": "Youtube",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "77%"
},
{
"content": "38%",
"className": "background-ruby-light"
},
{
"content": "62%",
"className": "background-ruby-light"
},
{
"content": "73%",
"className": "background-ruby-light"
},
{
"content": "80%"
},
{
"content": "83%",
"className": "background-jade-light"
},
{
"content": "93%",
"className": "background-jade-light"
},
{
"content": "93%",
"className": "background-jade-light"
},
{
"content": "81%"
}
]
},
{
"cells": [
{
"content": "Facebook",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "69%"
},
{
"content": "58%",
"className": "background-ruby-light"
},
{
"content": "70%"
},
{
"content": "77%",
"className": "background-jade-light"
},
{
"content": "82%",
"className": "background-jade-light"
},
{
"content": "83%",
"className": "background-jade-light"
},
{
"content": "85%",
"className": "background-jade-light"
},
{
"content": "68%"
},
{
"content": "9%",
"className": "background-ruby-light"
}
]
},
{
"cells": [
{
"content": "Instagram",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "66%"
},
{
"content": "40%",
"className": "background-ruby-light"
},
{
"content": "50%",
"className": "background-ruby-light"
},
{
"content": "67%"
},
{
"content": "76%",
"className": "background-jade-light"
},
{
"content": "75%",
"className": "background-jade-light"
},
{
"content": "82%",
"className": "background-jade-light"
},
{
"content": "87%",
"className": "background-jade-light"
},
{
"content": "31%",
"className": "background-ruby-light"
}
]
},
{
"cells": [
{
"content": "Snapchat",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "38%"
},
{
"content": "6%",
"className": "background-ruby-light"
},
{
"content": "9%",
"className": "background-ruby-light"
},
{
"content": "20%",
"className": "background-ruby-light"
},
{
"content": "33%",
"className": "background-ruby-light"
},
{
"content": "30%",
"className": "background-ruby-light"
},
{
"content": "58%"
},
{
"content": "89%",
"className": "background-jade-light"
},
{
"content": "47%",
"className": "background-jade-light"
}
]
},
{
"cells": [
{
"content": "Linkedin",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "27%"
},
{
"content": "5%",
"className": "background-ruby-light"
},
{
"content": "13%",
"className": "background-ruby-light"
},
{
"content": "31%",
"className": "background-jade-light"
},
{
"content": "41%",
"className": "background-jade-light"
},
{
"content": "42%",
"className": "background-jade-light"
},
{
"content": "45%",
"className": "background-jade-light"
},
{
"content": "23%",
"className": "background-ruby-light"
},
{
"content": "0%",
"className": "background-ruby-light"
}
]
},
{
"cells": [
{
"content": "Tiktok",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "22%"
},
{
"content": "2%",
"className": "background-ruby-light"
},
{
"content": "5%",
"className": "background-ruby-light"
},
{
"content": "7%",
"className": "background-ruby-light"
},
{
"content": "12%",
"className": "background-ruby-light"
},
{
"content": "10%",
"className": "background-ruby-light"
},
{
"content": "27%"
},
{
"content": "69%",
"className": "background-jade-light"
},
{
"content": "35%",
"className": "background-jade-light"
}
]
},
{
"cells": [
{
"content": "Flashback",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "20%"
},
{
"content": "5%",
"className": "background-ruby-light"
},
{
"content": "15%",
"className": "background-ruby-light"
},
{
"content": "22%"
},
{
"content": "33%",
"className": "background-jade-light"
},
{
"content": "29%",
"className": "background-jade-light"
},
{
"content": "31%",
"className": "background-jade-light"
},
{
"content": "13%",
"className": "background-ruby-light"
},
{
"content": "1%",
"className": "background-ruby-light"
}
]
},
{
"cells": [
{
"content": "Pinterest",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "18%"
},
{
"content": "3%",
"className": "background-ruby-light"
},
{
"content": "13%",
"className": "background-ruby-light"
},
{
"content": "14%"
},
{
"content": "17%"
},
{
"content": "15%"
},
{
"content": "26%",
"className": "background-jade-light"
},
{
"content": "31%",
"className": "background-jade-light"
},
{
"content": "15%"
}
]
},
{
"cells": [
{
"content": "Reddit",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "16%"
},
{
"content": "0%",
"className": "background-ruby-light"
},
{
"content": "1%",
"className": "background-ruby-light"
},
{
"content": "3%",
"className": "background-ruby-light"
},
{
"content": "10%",
"className": "background-ruby-light"
},
{
"content": "22%"
},
{
"content": "36%",
"className": "background-jade-light"
},
{
"content": "37%",
"className": "background-jade-light"
},
{
"content": "4%",
"className": "background-ruby-light"
}
]
},
{
"cells": [
{
"content": "X/Twitter",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "13%"
},
{
"content": "3%",
"className": "background-ruby-light"
},
{
"content": "5%",
"className": "background-ruby-light"
},
{
"content": "11%"
},
{
"content": "11%"
},
{
"content": "16%",
"className": "background-jade-light"
},
{
"content": "23%",
"className": "background-jade-light"
},
{
"content": "25%",
"className": "background-jade-light"
},
{
"content": "2%",
"className": "background-ruby-light"
}
]
},
{
"cells": [
{
"content": "Roblox",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "9%"
},
{
"content": "0%",
"className": "background-ruby-light"
},
{
"content": "0%",
"className": "background-ruby-light"
},
{
"content": "0%",
"className": "background-ruby-light"
},
{
"content": "1%",
"className": "background-ruby-light"
},
{
"content": "1%",
"className": "background-ruby-light"
},
{
"content": "1%",
"className": "background-ruby-light"
},
{
"content": "15%",
"className": "background-jade-light"
},
{
"content": "62%",
"className": "background-jade-light"
}
]
},
{
"cells": [
{
"content": "Threads",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "7%"
},
{
"content": "2%",
"className": "background-ruby-light"
},
{
"content": "6%",
"className": "background-ruby-light"
},
{
"content": "7%",
"className": "background-ruby-light"
},
{
"content": "8%"
},
{
"content": "11%",
"className": "background-jade-light"
},
{
"content": "10%",
"className": "background-jade-light"
},
{
"content": "9%"
},
{
"content": "0%",
"className": "background-ruby-light"
}
]
},
{
"cells": [
{
"content": "Twitch",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "6%"
},
{
"content": "0%",
"className": "background-ruby-light"
},
{
"content": "0%",
"className": "background-ruby-light"
},
{
"content": "0%",
"className": "background-ruby-light"
},
{
"content": "2%",
"className": "background-ruby-light"
},
{
"content": "6%"
},
{
"content": "14%",
"className": "background-jade-light"
},
{
"content": "16%",
"className": "background-jade-light"
},
{
"content": "4%",
"className": "background-ruby-light"
}
]
},
{
"cells": [
{
"content": "Bluesky",
"isHeader": true,
"scope": "row",
"dataLabel": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)"
},
{
"content": "2%"
},
{
"content": "1%",
"className": "background-ruby-light"
},
{
"content": "1%",
"className": "background-ruby-light"
},
{
"content": "2%"
},
{
"content": "3%"
},
{
"content": "5%",
"className": "background-jade-light"
},
{
"content": "3%"
},
{
"content": "2%"
},
{
"content": "0%",
"className": "background-ruby-light"
}
]
}
],
"footer": false,
"modifier": "m-table--sticky-first m-table--colored-cells",
"caption": false,
"scrollable": true,
"stickyFirst": true,
"scrollWrapperClass": "table-scroll-wrapper--report-upload alignwide",
"columnWidths": [
{
"width": "10rem"
},
{
"span": 9
}
],
"headerRows": [
{
"cells": [
{
"label": "Internetanvändare 8+ år. Andel användare (varje dag/vecka/senaste 12 mån)",
"rowspan": 2
},
{
"label": "Generation:",
"colspan": 9,
"className": "u-nowrap"
}
]
},
{
"cells": [
{
"label": "Total"
},
{
"label": "20-/30-/40-talister",
"className": "u-nowrap"
},
{
"label": "50-talister",
"className": "u-nowrap"
},
{
"label": "60-talister",
"className": "u-nowrap"
},
{
"label": "70-talister",
"className": "u-nowrap"
},
{
"label": "80-talister",
"className": "u-nowrap"
},
{
"label": "90-talister",
"className": "u-nowrap"
},
{
"label": "00-talister",
"className": "u-nowrap"
},
{
"label": "10-talister",
"className": "u-nowrap"
}
]
}
]
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@mixin table() {
width: 100%;
border-collapse: collapse;
border: 0;
counter-reset: table-counter;
&[aria-hidden="true"] {
display: none;
}
caption {
font-family: var.$font-family-headings;
padding-top: func.rhythm(1);
padding-bottom: func.rhythm(1);
}
thead,
tfoot {
font-family: var.$font-family-mono;
font-size: 85%;
text-transform: uppercase;
}
tfoot {
th,
td {
border-top: 2px solid colors.$color-granit;
font-family: var.$font-family-headings;
&::before {
display: none;
}
}
td {
border-top-width: 1px;
}
}
tbody {
font-weight: normal;
th {
border-bottom-width: 1px;
}
}
th {
font-weight: normal;
}
th,
td {
padding-top: func.rhythm(1);
padding-right: func.rhythm(2);
padding-bottom: func.rhythm(1);
padding-left: func.rhythm(2);
border-bottom: 2px solid colors.$color-granit;
color: var(--cyberspace-color);
font-size: 90%;
text-align: left;
&:first-child {
text-align: left;
}
span:not(.block-icon):not([class*="a-tooltip__text"]) {
display: block;
font-weight: 400;
}
a {
white-space: nowrap;
}
p {
display: inline;
}
@include breakpoint.bp-up(lg) {
font-size: 100%;
}
}
th {
font-size: 90%;
@include breakpoint.bp-up(lg) {
font-size: 100%;
}
}
td {
border-bottom-width: 1px;
font-size: var.$size-table-cell;
line-height: 1.5;
}
}
@include bem.b(table-container) {
position: relative;
width: 100%;
max-width: 1320px;
margin-right: auto;
margin-left: auto;
&:focus {
outline: none;
}
}
@keyframes xPulse {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(#{func.to_rem(6px)});
opacity: 0.55;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@include mixin.molecule(table) {
@include table();
@include bem.m(columns) {
th {
border-bottom: 2px solid colors.$color-granit;
}
td {
border-bottom: 1px solid colors.$color-granit;
}
th,
td {
&:nth-child(even) {
background-color: var(--snow-color);
}
}
}
@include bem.m(rows) {
thead {
th {
background-color: var(--ash-color);
}
}
tbody {
tr:nth-child(odd) {
th,
td {
background-color: var(--snow-color);
}
}
tr:nth-child(even) {
th,
td {
background-color: var(--ash-color);
}
}
}
}
@include bem.m(align-text-center) {
th,
td {
text-align: center;
&:first-child {
text-align: left;
}
}
}
@include bem.m(increment) {
tbody {
tr:nth-child(odd) {
th,
td {
background-color: var(--ash-color);
}
}
tr:nth-child(even) {
th,
td {
background-color: var(--snow-color);
}
}
}
th {
width: func.rhythm(4);
padding-right: func.rhythm(3);
&::before {
content: counter(table-counter);
counter-increment: table-counter;
}
}
}
@include bem.m(lines) {
tbody {
tr {
background-image:
linear-gradient(
to right,
colors.$color-cyberspace,
colors.$color-cyberspace 2px,
transparent 2px,
transparent 6px
);
background-repeat: repeat-x;
background-position: bottom left;
background-size: 6px 1px;
}
td,
th {
padding-top: func.rhythm(2);
padding-bottom: func.rhythm(2);
border: 0;
}
}
tfoot {
tr {
background-image: none;
th,
td {
border: 0;
}
}
}
}
@include bem.m(stacked) {
@include breakpoint.bp-down(sm) {
thead,
tfoot {
display: none;
}
tbody {
display: grid;
}
tr {
display: block;
background-color: var(--snow-color);
}
td,
th {
display: block;
padding-top: func.rhythm(1.25);
padding-right: func.rhythm(1.5);
padding-bottom: func.rhythm(1.25);
padding-left: func.rhythm(1.5);
border-bottom-width: 1px;
}
td::before,
th::before {
content: attr(data-label);
display: block;
margin-bottom: func.to_rem(4px);
font-family: var.$font-family-mono;
font-size: 75%;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.75;
}
[data-row-header="true"] {
padding-top: func.rhythm(1.5);
padding-bottom: func.rhythm(1.5);
border-bottom-width: 2px;
background-color: var(--ash-color);
font-family: var.$font-family-headings;
font-size: 100%;
&::before {
margin-bottom: func.to_rem(6px);
}
}
a {
white-space: normal;
overflow-wrap: anywhere;
}
span:not(.block-icon) {
display: inline;
}
}
}
@include bem.m(sticky-first) {
border-collapse: separate;
border-spacing: 0;
thead,
tbody,
tfoot {
> tr > :first-child {
position: sticky;
left: 0;
z-index: func.z_index(background);
background-color: var(--snow-color);
}
}
thead {
> tr > :first-child {
z-index: func.z_index(foreground);
background-color: var(--ash-color);
}
}
tbody {
tr:nth-child(odd) > :first-child {
background-color: var(--snow-color);
}
tr:nth-child(even) > :first-child {
background-color: var(--ash-color);
}
}
}
// Colored-cell tables use a neutral body so highlighted results remain clear.
@include bem.m(colored-cells) {
border: 1px solid colors.$color-granit;
border-radius: var.$border-radius;
overflow: hidden;
thead {
th {
background-color: var(--ash-color);
}
}
tbody {
tr:nth-child(odd),
tr:nth-child(even) {
> th,
> td {
background-color: var(--snow-color);
}
}
> tr > td {
text-align: center;
}
> tr > td[data-row-header='true'] {
text-align: left;
}
.background-ruby-light {
background-color: colors.$color-ruby-light;
}
.background-jade-light {
background-color: colors.$color-jade-light;
}
}
tfoot {
th,
td {
background-color: var(--snow-color);
}
}
&[class*='sticky-first'] {
thead > tr:not(:first-child) > :first-child {
/* The first header cell spans two rows, so this cell starts column two. */
position: static;
}
tbody {
tr:nth-child(odd),
tr:nth-child(even) {
> :first-child {
background-color: var(--snow-color);
}
}
}
}
th,
td {
&:not(:last-child) {
border-right: 1px solid colors.$color-granit;
}
}
}
}
@include bem.b(scroll-indicator) {
display: none;
position: absolute;
z-index: func.z_index(foreground);
top: func.to_rem(4px);
right: func.to_rem(4px);
align-items: center;
gap: func.to_rem(4px);
padding: func.to_rem(4px) func.to_rem(8px);
border-radius: func.rhythm(2);
background-color: rgba(colors.$color-cyberspace, 0.92);
color: colors.$color-snow;
pointer-events: none;
white-space: nowrap;
&::before {
content: 'Scroll';
font-family: var.$font-family-mono;
font-size: 70%;
text-transform: uppercase;
}
&::after {
content: '›';
animation: xPulse 2s infinite;
font-family: var.$font-family-mono;
font-size: 100%;
line-height: 1;
position: relative;
top: -2px;
}
}
@include bem.b(table-scroll-wrapper) {
position: relative;
max-width: 100%;
&::before,
&::after {
content: '';
position: absolute;
z-index: func.z_index(background);
top: 0;
bottom: 0;
width: func.rhythm(2.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
&::before {
left: 0;
background: linear-gradient(to right, rgba(colors.$color-cyberspace, 0.12), transparent);
}
&::after {
right: 0;
background: linear-gradient(to left, rgba(colors.$color-cyberspace, 0.12), transparent);
}
@include bem.b(table-container) {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: thin;
}
[data-table-layout~="scroll-target"] {
min-width: 100%;
width: max-content;
}
[data-table-layout~="sticky-first"] {
min-width: 48rem;
}
&[data-overflowing="true"][data-scroll-start="false"] {
&::before {
opacity: 1;
}
[data-table-layout~="sticky-first"] {
thead,
tbody,
tfoot {
> tr > :first-child {
box-shadow: func.to_rem(6px) 0 func.to_rem(10px) rgba(colors.$color-cyberspace, 0.06);
}
}
}
}
&[data-overflowing="true"][data-scroll-end="false"] {
&::after {
opacity: 1;
}
}
&[data-overflowing="true"][data-scroll-start="true"] {
@include bem.b(scroll-indicator) {
display: inline-flex;
}
}
}
// Default styling for tables without classes
table {
@include table();
}
// Styling for default WP Table Block
.wp-block-table {
@include table();
}
const TABLE_SELECTOR = '.js-table';
const TABLE_SCROLL_WRAPPER_SELECTOR = '.js-table-scroll-wrapper';
const TABLE_CONTAINER_SELECTOR = '.js-table-container';
function getHeaderLabels(table) {
return Array.from(table.querySelectorAll('thead th'))
.map((cell) => cell.textContent.replace(/\s+/g, ' ').trim())
.filter(Boolean);
}
function syncLabels(table) {
const labels = getHeaderLabels(table);
if (!labels.length) {
return;
}
table.querySelectorAll('tbody tr').forEach((row) => {
Array.from(row.children).forEach((cell, index) => {
if (!cell.dataset.label && labels[index]) {
cell.dataset.label = labels[index];
}
});
});
}
function updateScrollState(wrapper) {
const container = wrapper.querySelector(TABLE_CONTAINER_SELECTOR);
if (!container) {
return;
}
const maxScrollLeft = Math.max(container.scrollWidth - container.clientWidth, 0);
const hasOverflow = maxScrollLeft > 8;
const scrollLeft = container.scrollLeft;
wrapper.dataset.overflowing = hasOverflow ? 'true' : 'false';
wrapper.dataset.scrollStart = !hasOverflow || scrollLeft <= 4 ? 'true' : 'false';
wrapper.dataset.scrollEnd = !hasOverflow || scrollLeft >= maxScrollLeft - 4 ? 'true' : 'false';
}
function enhanceScrollableTable(wrapper) {
if (wrapper.dataset.tableReady === 'true') {
updateScrollState(wrapper);
return;
}
const container = wrapper.querySelector(TABLE_CONTAINER_SELECTOR);
const table = container?.querySelector(TABLE_SELECTOR);
if (!container) {
return;
}
wrapper.dataset.tableReady = 'true';
const update = () => updateScrollState(wrapper);
container.addEventListener('scroll', update, { passive: true });
if ('ResizeObserver' in window) {
const observer = new ResizeObserver(update);
observer.observe(container);
if (table) {
observer.observe(table);
}
}
update();
}
document.querySelectorAll(TABLE_SELECTOR).forEach(syncLabels);
document.querySelectorAll(TABLE_SCROLL_WRAPPER_SELECTOR).forEach(enhanceScrollableTable);
window.addEventListener('load', () => {
document.querySelectorAll(TABLE_SCROLL_WRAPPER_SELECTOR).forEach(updateScrollState);
});
The basic scrollable table starts scrolling below the medium breakpoint (769px).
Responsive variants to compare: