<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
:is(table, .c-tbl) {
--tbl-bgc: orange;
}
table {
--tbl-bgc: tan;
}
:where(table) {
--tbl-bgc: hotpink;
background-color: var(--tbl-bgc);
}
/* PRESENATIONAL STYLES */
body {
background: #333;
display: grid;
place-items: center;
height: 100vh;
}
table {
width: 80%;
}
thead {
text-align: left;
}
th,
td {
padding: 5px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.