Make table overflow scrollable (advanced demo).
?⃝ Explanation
A
<table>can not scroll its content. The trick is to wrap it in a<div>and scroll the<div>.
ⓘ Notice
This class can only be used on a table wrapper. It has no affect when used on table directly.
<dl class="demo-advanced demo-vert">
<dt>Vertical</dt>
<dd class="o-table-wrap--overflow-scroll">
<table class=" ">
<caption>Constrained to height smaller than its minimum content height.</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>
</tbody>
</table>
</dd>
</dl>
<dl class="demo-advanced demo-horz">
<dt>Horizontal</dt>
<dd class="o-table-wrap--overflow-scroll">
<table class=" ">
<caption>Constrained to width smaller than its minimum content width.</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>
</tbody>
</table>
</dd>
</dl>
<dl class="demo-advanced demo-horz demo-vert">
<dt>Horizontal & Vertical</dt>
<dd class="o-table-wrap--overflow-scroll">
<table class=" ">
<caption>Constrained to width and height smaller than its minimum content width and height.</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>
</tbody>
</table>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* IMPORTANT: See `example.….css` code to learn how to adapt this pattern. */
/* To force overflow */
.o-table-wrap--overflow-hidden:not(.demo-advanced *),
.o-table-wrap--overflow-scroll:not(.demo-advanced *) {
width: 400px;
height: 175px;
}
/* To illustrate table behavior is because of flex item wrapper (not window) */
body {
display: flex;
gap: 25px;
padding-inline: 25px;
}
body > * { flex-basis: 33%; }
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* To force horizontal scrollbar */
dl.demo-advanced.demo-horz dd { max-width: 400px; }
dl.demo-advanced.demo-horz table { white-space: nowrap; }
/* To force vertical scrollbar */
dl.demo-advanced.demo-vert dd { max-height: 175px; }
/* To overwrite "extra" styles */
dl.demo-advanced.demo-vert:not(.demo-horz) table {
white-space: normal; /* overwrite `extra.overflow-scroll.css` */
}
/* To lay out examples */
body:has(.demo-advanced) {
display: grid;
column-gap: 25px;
padding-inline: 25px;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
justify-items: center;
}
dl.demo-advanced {
display: grid;
grid-auto-rows: minmax(min-content, max-content);
}
dl.demo-advanced dd {
/* To overwrite _preview.hbs */
margin-bottom: unset !important;
margin-left: unset !important;
}
/* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */
/* Truncate Cell Text: - Verbose i.e. Custom */
.o-table-wrap--flexible-horz > table :is(td, th) /* plain text cell */,
.o-table-wrap--flexible-horz > table :is(td, th) > :is(a, span) /* element in cell */ {
/* NOTE: If multiple lines are okay, omit rule */
white-space: nowrap;
/* NOTE: To clip: either use 'clip' value or omit rule */
text-overflow: ellipsis;
/* NOTE: If overlap is okay, omit rule */
overflow: hidden;
}
/* Truncate Cell Text - Mixin i.e. Standard */
/*
1. import @tacc/core-styles/src/lib/_imports/tools/x-truncate.css
2. mixin or compose .x-truncate--one-line
*/
/* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */
/* Prevent Text Wrap */
/* NOTE: If multiple lines are okay, do not use ruleset */
.o-table-wrap--overflow-hidden table {
white-space: nowrap;
}
/* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */
/* Prevent Text Wrap */
/* NOTE: If multiple lines are okay, do not use ruleset */
.o-table-wrap--overflow-scroll table {
white-space: nowrap;
}
{
"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"
}
]
}
}