_tables.scss modified 20 days ago
GitHub: _tables.scss
// tables
@use "../2-atoms/beam";
//@use "../2-atoms/icon";
table {
width: 100%;
border-collapse: collapse;
display: block;
//container-type: inline-size;
--min-fs: .6875;
--max-fs: 1;
--min-vw: 20;
--max-vw: 60;
--min-fs-rem: var(--min-fs) * 1rem;
--max-fs-rem: var(--max-fs) * 1rem;
--min-vw-rem: var(--min-vw) * 1rem;
--slope: (var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) / (var(--max-vw) - var(--min-vw));
input,
textarea,
select {
padding: 0 var(--base-unit--ss);
}
textarea,
.date,
.time {
//@extend %beam;
// position: relative;
min-width: 20ch;
//gap:var(--base-unit--ss);
// [type="checkbox"]{
// &:before {
// content: '•';
// display: block;
// }
// // flex: 1;
// // + label {
// // flex: 2;
// // }
// }
}
.date {
margin-bottom: var(--base-unit--ss);
}
}
tr {
border-bottom: var(--border-width) solid currentcolor;
}
td,
th {
text-align: start;
vertical-align: baseline;
padding: var(--base-unit--ss);
// word-break: break-word;
// hyphens: auto;
}
// th {
// td:nth-child(1) {
// position: sticky;
// inset-inline-start: 0;
// z-index: 1;
// background-color: var(--clr-bg);
// }
//
// }
@media (max-width: 1280px) {
th,
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-clamp: 1;
font-size: clamp(var(--min-fs-rem), var(--min-fs-rem) + var(--slope), var(--max-fs-rem));
}
}
Source html
<table>
<thead>
<tr>
<th><input name="select_all" id="select_all" type="checkbox" value="0"></th>
<th data-col="id" scope="col"><a href="#">ID#</a></th>
<th data-col="title" scope="col"><a href="#">Title</a></th>
<th data-col="posted" aria-sort="descending" scope="col"><a href="#">Posted</a></th>
<th data-col="lastmod" scope="col"><a href="#">Modified</a></th>
<th data-col="expires" scope="col"><a href="#">Expires</a></th>
<th data-col="section" scope="col"><a href="#">Section</a></th>
<th data-col="category1" scope="col"><a href="#">Category 1</a></th>
<th data-col="category2" scope="col"><a href="#">Category 2</a></th>
<th data-col="status" scope="col"><a href="#">Status</a></th>
<th data-col="comments" scope="col"><a href="#">Comments</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="selected[]" type="checkbox" value="7">
</td>
<th scope="row"><a title="Edit" href="#">7</a></th>
<td><a title="Edit" href="#">SASS directories & naming</a></td>
<td>21 Nov 2024 7:36 AM</td>
<td>21 Nov 2024 11:37 AM</td>
<td> </td>
<td><span title="txpstyle">TXP5 SASS Library</span></td>
<td> </td>
<td> </td>
<td><a rel="external" target="_blank" title="View" href="#">Sticky</a></td>
<td><span>Off</span> <span>(0)</span></td>
</tr>
<tr>
<td>
<input name="selected[]" type="checkbox" value="6">
</td>
<th scope="row"><a title="Edit" href="#">6</a></th>
<td><a title="Edit" href="#">_s_mixins.scss</a></td>
<td>18 Nov 2024 12:33 PM</td>
<td>21 Nov 2024 9:47 AM</td>
<td> </td>
<td><span title="txpstyle">TXP5 SASS Library</span></td>
<td><span title="0-settings">0-settings</span></td>
<td> </td>
<td><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td><span>Off</span> <span>(0)</span></td>
</tr>
<tr>
<td>
<input name="selected[]" type="checkbox" value="5">
</td>
<th scope="row"><a title="Edit" href="#">5</a></th>
<td><a title="Edit" href="#">_b_reset.scss</a></td>
<td>18 Nov 2024 12:28 PM</td>
<td>23 Nov 2024 11:41 AM</td>
<td> </td>
<td><span title="txpstyle">TXP5 SASS Library</span></td>
<td><span title="1-base">1-base</span></td>
<td> </td>
<td><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td><span>Off</span> <span>(0)</span></td>
</tr>
<tr>
<td>
<input name="selected[]" type="checkbox" value="4">
</td>
<th scope="row"><a title="Edit" href="#">4</a></th>
<td><a title="Edit" href="#">_s_colours.scss</a></td>
<td>18 Nov 2024 11:17 AM</td>
<td>21 Nov 2024 9:44 AM</td>
<td> </td>
<td><span title="txpstyle">TXP5 SASS Library</span></td>
<td><span title="0-settings">0-settings</span></td>
<td> </td>
<td><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td><span>Off</span> <span>(0)</span></td>
</tr>
<tr>
<td>
<input name="selected[]" type="checkbox" value="3">
</td>
<th scope="row"><a title="Edit" href="#">3</a></th>
<td><a title="Edit" href="#">_s_config.scss</a></td>
<td>17 Nov 2024 9:46 AM</td>
<td>21 Nov 2024 8:24 AM</td>
<td> </td>
<td><span title="txpstyle">TXP5 SASS Library</span></td>
<td><span title="0-settings">0-settings</span></td>
<td> </td>
<td><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td><span>Off</span> <span>(0)</span></td>
</tr>
<tr>
<td>
<input name="selected[]" type="checkbox" value="2">
</td>
<th scope="row"><a title="Edit" href="#">2</a></th>
<td><a title="Edit" href="#">Nodes Commentary</a></td>
<td>10 Nov 2024 5:48 PM</td>
<td>12 Nov 2024 9:23 AM</td>
<td> </td>
<td><span title="nodes">Nodes</span></td>
<td> </td>
<td> </td>
<td><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td><span>On</span> <span><a title="Manage" href="#">(1)</a></span></td>
</tr>
<tr>
<td>
<input name="selected[]" type="checkbox" value="8">
</td>
<th scope="row"><a title="Edit" href="#">8</a></th>
<td><a title="Edit" href="#">_b_typeset.scss</a></td>
<td>31 May 2024 10:31 AM</td>
<td>24 Nov 2024 8:35 AM</td>
<td> </td>
<td><span title="txpstyle">TXP5 SASS Library</span></td>
<td><span title="1-base">1-base</span></td>
<td><span title="type">Type</span></td>
<td><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td><span>Off</span> <span>(0)</span></td>
</tr>
<tr>
<td>
<input name="selected[]" type="checkbox" value="1">
</td>
<th scope="row"><a title="Edit" href="#">1</a></th>
<td><a title="Edit" href="#">_b_common.scss</a></td>
<td>31 May 2024 10:31 AM</td>
<td>24 Nov 2024 10:10 AM</td>
<td> </td>
<td><span title="txpstyle">TXP5 SASS Library</span></td>
<td><span title="1-base">1-base</span></td>
<td> </td>
<td><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td><span>Off</span> <span><a title="Manage" href="#">(1)</a></span></td>
</tr>
</tbody>
</table>