A table nested inside a table.
⚠️ Workaround
Nested tables require
.has-tableclass on both parent table and containing cell.This is only until
:has()pseudo-class support exists on all major browsers.
| Class | Example | On |
|---|---|---|
.has-table |
<table class="has-table"> … </table> |
parent table |
.has-table |
<td class="has-table"> … </td> |
cell that contains nested table |
<table class=" ">
<thead>
<tr>
<th>Title</th>
<th>Principal Investigator</th>
<th>Team</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<th>Copper</th>
<th>Paul Bunyan</th>
<th><a href="#">View Team</a></th>
<td class="has-table">
<table class="has-table ">
<thead>
<tr>
<th>Systems</th>
<th>Awarded</th>
<th>Remaining</th>
<th>Expires</th>
</tr>
</thead>
<tbody>
<tr>
<th>Corral</th>
<td>50 GB</td>
<td><span class="c-pill c-pill--is-danger">13 GB</span></td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
<tr>
<th>Hikari</th>
<td>21 SU</td>
<td><span class="c-pill c-pill--is-warning">1.5 SU</span></td>
<td><time>03/22/2021 05:23:01</time></td>
</tr>
<tr>
<th>Ranch</th>
<td>1 TB</td>
<td><span class="c-pill c-pill--is-success">932 GB</span></td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th>Vermillion</th>
<th>Nathan Fillion</th>
<th><a href="#">View Team</a></th>
<td class="has-table">
<table class="has-table ">
<thead>
<tr>
<th>Systems</th>
<th>Awarded</th>
<th>Remaining</th>
<th>Expires</th>
</tr>
</thead>
<tbody>
<tr>
<th>Corral</th>
<td>50 GB</td>
<td><span class="c-pill c-pill--is-danger">13 GB</span></td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
<tr>
<th>Hikari</th>
<td>21 SU</td>
<td><span class="c-pill c-pill--is-warning">1.5 SU</span></td>
<td><time>03/22/2021 05:23:01</time></td>
</tr>
<tr>
<th>Ranch</th>
<td>1 TB</td>
<td><span class="c-pill c-pill--is-success">932 GB</span></td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th>Emerald</th>
<th>Wesley Snipes</th>
<th><a href="#">View Team</a></th>
<td class="has-table">
<table class="has-table ">
<thead>
<tr>
<th>Systems</th>
<th>Awarded</th>
<th>Remaining</th>
<th>Expires</th>
</tr>
</thead>
<tbody>
<tr>
<th>Corral</th>
<td>50 GB</td>
<td><span class="c-pill c-pill--is-danger">13 GB</span></td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
<tr>
<th>Hikari</th>
<td>21 SU</td>
<td><span class="c-pill c-pill--is-warning">1.5 SU</span></td>
<td><time>03/22/2021 05:23:01</time></td>
</tr>
<tr>
<th>Ranch</th>
<td>1 TB</td>
<td><span class="c-pill c-pill--is-success">932 GB</span></td>
<td><time>12/01/2019 11:04:19</time></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
{
"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": "elements",
"data": {
"has-table": true,
"cols": [
"Title",
"Principal Investigator",
"Team",
"Usage"
],
"rows": [
{
"id": "Copper",
"name": "Paul Bunyan",
"name-link": "View Team",
"table": {
"cols": [
"Systems",
"Awarded",
"Remaining",
"Expires"
],
"rows": [
{
"name": "Corral",
"custom-1": "50 GB",
"custom-2": "<span class=\"c-pill c-pill--is-danger\">13 GB</span>",
"time": "12/01/2019 11:04:19"
},
{
"name": "Hikari",
"custom-1": "21 SU",
"custom-2": "<span class=\"c-pill c-pill--is-warning\">1.5 SU</span>",
"time": "03/22/2021 05:23:01"
},
{
"name": "Ranch",
"custom-1": "1 TB",
"custom-2": "<span class=\"c-pill c-pill--is-success\">932 GB</span>",
"time": "12/01/2019 11:04:19"
}
]
}
},
{
"id": "Vermillion",
"name": "Nathan Fillion",
"name-link": "View Team",
"table": {
"cols": [
"Systems",
"Awarded",
"Remaining",
"Expires"
],
"rows": [
{
"name": "Corral",
"custom-1": "50 GB",
"custom-2": "<span class=\"c-pill c-pill--is-danger\">13 GB</span>",
"time": "12/01/2019 11:04:19"
},
{
"name": "Hikari",
"custom-1": "21 SU",
"custom-2": "<span class=\"c-pill c-pill--is-warning\">1.5 SU</span>",
"time": "03/22/2021 05:23:01"
},
{
"name": "Ranch",
"custom-1": "1 TB",
"custom-2": "<span class=\"c-pill c-pill--is-success\">932 GB</span>",
"time": "12/01/2019 11:04:19"
}
]
}
},
{
"id": "Emerald",
"name": "Wesley Snipes",
"name-link": "View Team",
"table": {
"cols": [
"Systems",
"Awarded",
"Remaining",
"Expires"
],
"rows": [
{
"name": "Corral",
"custom-1": "50 GB",
"custom-2": "<span class=\"c-pill c-pill--is-danger\">13 GB</span>",
"time": "12/01/2019 11:04:19"
},
{
"name": "Hikari",
"custom-1": "21 SU",
"custom-2": "<span class=\"c-pill c-pill--is-warning\">1.5 SU</span>",
"time": "03/22/2021 05:23:01"
},
{
"name": "Ranch",
"custom-1": "1 TB",
"custom-2": "<span class=\"c-pill c-pill--is-success\">932 GB</span>",
"time": "12/01/2019 11:04:19"
}
]
}
}
]
}
}