A table whose <thead> uses [colspan] to group columns under a shared header.
ⓘ Notice A
[colspan]-ed cell never pins, even when it is a row’s first child — otherwise it would overlap the columns beneath it.
ⓘ Notice A row’s first column can only pin if it is a
<th>, because that is explicit definition for cell in a column that labels it’s rows.
Scroll the table horizontally to confirm.
<div class="o-table-wrap o-table-wrap--overflow-scroll">
<table>
<thead>
<tr>
<th colspan="2">Product</th>
<th colspan="2">Sales</th>
</tr>
<tr>
<th>Name</th>
<th>Category</th>
<th>Q1</th>
<th>Q2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Widget</th>
<td>Hardware</td>
<td>120</td>
<td>150</td>
</tr>
<tr>
<th>Gadget</th>
<td>Hardware</td>
<td>90</td>
<td>100</td>
</tr>
<tr>
<th>Gizmo</th>
<td>Software</td>
<td>60</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* To force horizontal scrollbar (so sticky first-column behavior is visible) */
.o-table-wrap--overflow-scroll {
max-width: 200px;
}
.o-table-wrap--overflow-scroll table {
white-space: nowrap;
}
{
"shouldSkipPattern": true,
"bootstrap4Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap4.css"
}
],
"bootstrap5Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap5.css"
}
],
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "elements"
}