A table with its header pinned during vertical scroll.
⚠️ Important
The
<div>wrapper is not required. Do not add unless your use case demands one.
?⃝ Explanation
You can’t position: sticky; a
<thead>. Nor a<tr>. But you can sticky a<th>…
ⓘ Notice
This class can be used on a table or a table wrapper.
<dl>
<dt>Class Directly on Table</dt>
<dd>
<div>
<table class=" o-fixed-header-table">
<caption>Header stays pinned top top of container on scroll.</catpion>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Size</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<th>n234as</th>
<th>apple-sauce</th>
<td>0.5 KB</td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
<tr>
<th>56l810</th>
<th>milk-shake-032</th>
<td>300.0 KB</td>
<td><time>03/22/2021 05:23:01</time></td>
</tr>
<tr>
<th>3r56xc</th>
<th>white-candy-5</th>
<td>1.5 MB</td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
<tr>
<th>7ysnw3</th>
<th>butter-balls</th>
<td>0.5 KB</td>
<td><time>09/11/2010 10:54:09</time></td>
</tr>
<tr>
<th>20ksdf</th>
<th>lemon-cookies-30</th>
<td>250.0 MB</td>
<td><time>04/20/2020 15:03:10</time></td>
</tr>
<tr>
<th>7uys9e</th>
<th>purple-turnips-6</th>
<td>10.5 GB</td>
<td><time>10/31/2017 19:59:41</time></td>
</tr>
<tr>
<th>98eeui</th>
<th>nightmare-treats</th>
<td>0.5 KB</td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
<tr>
<th>54rr0s</th>
<th>toffe-pimples-12</th>
<td>300.0 KB</td>
<td><time>03/22/2021 05:23:01</time></td>
</tr>
<tr>
<th>12dsds</th>
<th>cartesian-dumpling</th>
<td>1.5 MB</td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
<tr>
<th>2gesee</th>
<th>crunchy-noodles</th>
<td>0.5 KB</td>
<td><time>09/11/2010 10:54:09</time></td>
</tr>
<tr>
<th>wr435e</th>
<th>ripe-mango-220</th>
<td>250.0 MB</td>
<td><time>04/20/2020 15:03:10</time></td>
</tr>
<tr>
<th>76rgd3</th>
<th>purple-turnips-6</th>
<td>10.5 GB</td>
<td><time>10/31/2017 19:59:41</time></td>
</tr>
</tbody>
</table>
</div>
</dd>
</dl>
<dl>
<dt>Class on Table Wrapper</dt>
<dd>
<div class="o-fixed-header-table">
<table class=" ">
<caption>Header stays pinned top top of container on scroll.</catpion>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Size</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<th>n234as</th>
<th>apple-sauce</th>
<td>0.5 KB</td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
<tr>
<th>56l810</th>
<th>milk-shake-032</th>
<td>300.0 KB</td>
<td><time>03/22/2021 05:23:01</time></td>
</tr>
<tr>
<th>3r56xc</th>
<th>white-candy-5</th>
<td>1.5 MB</td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
<tr>
<th>7ysnw3</th>
<th>butter-balls</th>
<td>0.5 KB</td>
<td><time>09/11/2010 10:54:09</time></td>
</tr>
<tr>
<th>20ksdf</th>
<th>lemon-cookies-30</th>
<td>250.0 MB</td>
<td><time>04/20/2020 15:03:10</time></td>
</tr>
<tr>
<th>7uys9e</th>
<th>purple-turnips-6</th>
<td>10.5 GB</td>
<td><time>10/31/2017 19:59:41</time></td>
</tr>
<tr>
<th>98eeui</th>
<th>nightmare-treats</th>
<td>0.5 KB</td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
<tr>
<th>54rr0s</th>
<th>toffe-pimples-12</th>
<td>300.0 KB</td>
<td><time>03/22/2021 05:23:01</time></td>
</tr>
<tr>
<th>12dsds</th>
<th>cartesian-dumpling</th>
<td>1.5 MB</td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
<tr>
<th>2gesee</th>
<th>crunchy-noodles</th>
<td>0.5 KB</td>
<td><time>09/11/2010 10:54:09</time></td>
</tr>
<tr>
<th>wr435e</th>
<th>ripe-mango-220</th>
<td>250.0 MB</td>
<td><time>04/20/2020 15:03:10</time></td>
</tr>
<tr>
<th>76rgd3</th>
<th>purple-turnips-6</th>
<td>10.5 GB</td>
<td><time>10/31/2017 19:59:41</time></td>
</tr>
</tbody>
</table>
</div>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* To manage scrollbars to illustrate feature */
div {
/* To force render of vertical scrollbar */
max-height: 300px;
overflow-y: scroll;
/* To avoid duplicate vertical scrollbars */
height: 100%;
}
/* To illustrate that scrollbar is for the table (not the window) */
body {
display: flex;
flex-wrap: wrap;
}
{
"shouldSkipPattern": true,
"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": "objects",
"shouldLoadBootstrap": true,
"📝 shouldLoadBootstrap": "not yet tested without Bootstrap (known dependencies: <caption> font color)",
"data": {
"cols": [
"ID",
"Name",
"Size",
"Time"
],
"rows": [
{
"id": "n234as",
"name": "apple-sauce",
"custom-1": "0.5 KB",
"time": "12/01/2019 11:04:19"
},
{
"id": "56l810",
"name": "milk-shake-032",
"custom-1": "300.0 KB",
"time": "03/22/2021 05:23:01"
},
{
"id": "3r56xc",
"name": "white-candy-5",
"custom-1": "1.5 MB",
"time": "12/01/2019 11:04:19"
},
{
"id": "7ysnw3",
"name": "butter-balls",
"custom-1": "0.5 KB",
"time": "09/11/2010 10:54:09"
},
{
"id": "20ksdf",
"name": "lemon-cookies-30",
"custom-1": "250.0 MB",
"time": "04/20/2020 15:03:10"
},
{
"id": "7uys9e",
"name": "purple-turnips-6",
"custom-1": "10.5 GB",
"time": "10/31/2017 19:59:41"
},
{
"id": "98eeui",
"name": "nightmare-treats",
"custom-1": "0.5 KB",
"time": "12/01/2019 11:04:19"
},
{
"id": "54rr0s",
"name": "toffe-pimples-12",
"custom-1": "300.0 KB",
"time": "03/22/2021 05:23:01"
},
{
"id": "12dsds",
"name": "cartesian-dumpling",
"custom-1": "1.5 MB",
"time": "12/01/2019 11:04:19"
},
{
"id": "2gesee",
"name": "crunchy-noodles",
"custom-1": "0.5 KB",
"time": "09/11/2010 10:54:09"
},
{
"id": "wr435e",
"name": "ripe-mango-220",
"custom-1": "250.0 MB",
"time": "04/20/2020 15:03:10"
},
{
"id": "76rgd3",
"name": "purple-turnips-6",
"custom-1": "10.5 GB",
"time": "10/31/2017 19:59:41"
}
]
}
}