Make table behave like a flex item, for a specific CEPv2 Portal use case.
?⃝ Explanation
A
<table>can not be a flex item. The trick is to wrap the table in a<div>.
ⓘ Notice
This class can only be used on a table wrapper.
⚠️ Important
This class was used by CEPv2 Portal for a specific use case. It is not generic. Use or reference
.o-flexible-table-wrapfor generic use cases.
<section>
<header>Section Title</header>
<p>Section/Table Description</p>
<div class="o-flex-item-table-wrap">
<table class=" ">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Size</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<th>n234as</th>
<th>apple-sauce</th>
<td title="Veni, vidi, vici.
">
<span>Veni, vidi, vici.
</span>
</td>
<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 title="Veni, vidi, vici.
">
<span>Veni, vidi, vici.
</span>
</td>
<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 title="Veni, vidi, vici.
">
<span>Veni, vidi, vici.
</span>
</td>
<td>1.5 MB</td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
</tbody>
</table>
</div>
</section>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* Example */
section {
display: flex;
flex-direction: column;
}
{
"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",
"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"
}
]
}
}