Make table fit inside a flexible item.
For client customization examples, see relevant example.…-….css “File” from “Assets” tab.
?⃝ Explanation
A
<table>can not be a flex item. The trick is to wrap it in a<div>.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.
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</div>
<div>
<p class="
c-message
c-message--type-info
c-message--scope-section
">
To render a table, choose a modifier class from the navigation panel.
</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</div>
/* 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;
}
.o-table-wrap--flexible-horz > table {
width: 100%;
table-layout: fixed; /* to allow `width` to have effect */
}
.o-table-wrap--flexible-vert > table {
height: 100%;
}
.o-table-wrap--overflow-hidden {
overflow: hidden;
}
/* This file exists solely so UI demo loads a `.html` page for it */
/* FAQ: Without this file, the page only works via `fractal start` */
.o-table-wrap--overflow-scroll {
/* NOTE: Setting `auto` for `overflow-x` or `…-y` will invisibly set both */
/* SEE: https://stackoverflow.com/a/6433475/11817077 */
overflow: auto;
}
{
"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",
"Description",
"Size",
"Time"
],
"rows": [
{
"id": "n234as",
"name": "apple-sauce",
"sentence": true,
"custom-1": "0.5 KB",
"time": "12/01/2019 11:04:19"
},
{
"id": "56l810",
"name": "milk-shake-032",
"sentence": true,
"custom-1": "300.0 KB",
"time": "03/22/2021 05:23:01"
},
{
"id": "3r56xc",
"name": "white-candy-5",
"sentence": true,
"custom-1": "1.5 MB",
"time": "12/01/2019 11:04:19"
},
{
"id": "7ysnw3",
"name": "butter-balls",
"sentence": true,
"custom-1": "0.5 KB",
"time": "09/11/2010 10:54:09"
},
{
"id": "20ksdf",
"name": "lemon-cookies-30",
"sentence": true,
"custom-1": "250.0 MB",
"time": "04/20/2020 15:03:10"
}
]
}
}