_txp-listtables.scss modified 28 days ago
GitHub: _txp-listtables.scss
.txp-listtables {
padding: var(--base-unit) 0;
overflow-x: auto;
&.is--overflowing { // added via js when table overflows in the x direction
border-inline-end: var(--base-unit--ss) solid var(--clr-brand);
}
td:first-child {
position: sticky;
z-index: 1;
left: 0;
background: var(--clr-bg);
}
}
Source html
<div class="txp-listtables" tabindex="0" aria-label="List">
<table class="txp-list">
<thead>
<tr>
<th class="txp-list-col-multi-edit" scope="col" title="Toggle all/none selected">
<input name="select_all" id="select_all" type="checkbox" value="0">
</th>
<th class="txp-list-col-id desc" data-col="id" aria-sort="descending" scope="col"><a href="#">ID#</a></th>
<th class="txp-list-col-title" data-col="title" scope="col"><a href="#">Title</a></th>
<th class="txp-list-col-posted date" data-col="posted" scope="col"><a href="#">Posted</a></th>
<th class="txp-list-col-lastmod date" data-col="lastmod" scope="col"><a href="#">Modified</a></th>
<th class="txp-list-col-expires date" data-col="expires" scope="col"><a href="#">Expires</a></th>
<th class="txp-list-col-section" data-col="section" scope="col"><a href="#">Section</a></th>
<th class="txp-list-col-category1" data-col="category1" scope="col"><a href="#">Category 1</a></th>
<th class="txp-list-col-category2" data-col="category2" scope="col"><a href="#">Category 2</a></th>
<th class="txp-list-col-status" data-col="status" scope="col"><a href="#">Status</a></th>
<th class="txp-list-col-comments" data-col="comments" scope="col"><a href="#">Comments</a></th>
</tr>
</thead>
<tbody>
<tr>
<td class="txp-list-col-multi-edit">
<input name="selected[]" class="checkbox" type="checkbox" value="37">
</td>
<th scope="row"><a title="Edit" href="#">37</a></th>
<td class="txp-list-col-title"><a title="Edit" href="#">Formalism</a></td>
<td class="txp-list-col-posted date">21 Feb 2025 8:15 AM</td>
<td class="txp-list-col-lastmod date not-modified">21 Feb 2025 8:15 AM</td>
<td class="txp-list-col-expires date"> </td>
<td class="txp-list-col-section"><span title="De Stjl">De Stjl</span></td>
<td class="txp-list-col-category1 category"><span title="expressionism">Expressionism</span></td>
<td class="txp-list-col-category2 category"> </td>
<td class="txp-list-col-status"><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td class="txp-list-col-comments"><span class="comments-status">Off</span> <span class="comments-manage">(0)</span></td>
</tr>
<tr>
<td class="txp-list-col-multi-edit">
<input name="selected[]" class="checkbox" type="checkbox" value="36">
</td>
<th scope="row"><a title="Edit" href="#">36</a></th>
<td class="txp-list-col-title"><a title="Edit" href="#">Post Modern</a></td>
<td class="txp-list-col-posted date">10 Feb 2025 8:49 AM</td>
<td class="txp-list-col-lastmod date">16 Feb 2025 8:04 AM</td>
<td class="txp-list-col-expires date"> </td>
<td class="txp-list-col-section"><span title="De Stjl">De Stjl</span></td>
<td class="txp-list-col-category1 category"> </td>
<td class="txp-list-col-category2 category"> </td>
<td class="txp-list-col-status"><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td class="txp-list-col-comments"><span class="comments-status">Off</span> <span class="comments-manage">(0)</span></td>
</tr>
<tr>
<td class="txp-list-col-multi-edit">
<input name="selected[]" class="checkbox" type="checkbox" value="35">
</td>
<th scope="row"><a title="Edit" href="#">35</a></th>
<td class="txp-list-col-title"><a title="Edit" href="#">Baroque</a></td>
<td class="txp-list-col-posted date">10 Feb 2025 8:49 AM</td>
<td class="txp-list-col-lastmod date">16 Feb 2025 8:04 AM</td>
<td class="txp-list-col-expires date"> </td>
<td class="txp-list-col-section"><span title="De Stjl">De Stjl</span></td>
<td class="txp-list-col-category1 category"> </td>
<td class="txp-list-col-category2 category"> </td>
<td class="txp-list-col-status"><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td class="txp-list-col-comments"><span class="comments-status">Off</span> <span class="comments-manage">(0)</span></td>
</tr>
<tr>
<td class="txp-list-col-multi-edit">
<input name="selected[]" class="checkbox" type="checkbox" value="34">
</td>
<th scope="row"><a title="Edit" href="#">34</a></th>
<td class="txp-list-col-title"><a title="Edit" href="#">Abstract</a></td>
<td class="txp-list-col-posted date">06 Feb 2025 8:24 AM</td>
<td class="txp-list-col-lastmod date">21 Feb 2025 8:18 AM</td>
<td class="txp-list-col-expires date"> </td>
<td class="txp-list-col-section"><span title="De Stjl">De Stjl</span></td>
<td class="txp-list-col-category1 category"> </td>
<td class="txp-list-col-category2 category"> </td>
<td class="txp-list-col-status"><a rel="external" target="_blank" title="View" href="#">Sticky</a></td>
<td class="txp-list-col-comments"><span class="comments-status">Off</span> <span class="comments-manage">(0)</span></td>
</tr>
<tr>
<td class="txp-list-col-multi-edit">
<input name="selected[]" class="checkbox" type="checkbox" value="33">
</td>
<th scope="row"><a title="Edit" href="#">33</a></th>
<td class="txp-list-col-title"><a title="Edit" href="#">Dada</a></td>
<td class="txp-list-col-posted date">27 Dec 2024 8:24 AM</td>
<td class="txp-list-col-lastmod date">31 Jan 2025 8:52 AM</td>
<td class="txp-list-col-expires date"> </td>
<td class="txp-list-col-section"><span title="De Stjl">De Stjl</span></td>
<td class="txp-list-col-category1 category"> </td>
<td class="txp-list-col-category2 category"> </td>
<td class="txp-list-col-status"><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td class="txp-list-col-comments"><span class="comments-status">Off</span> <span class="comments-manage">(0)</span></td>
</tr>
<tr>
<td class="txp-list-col-multi-edit">
<input name="selected[]" class="checkbox" type="checkbox" value="32">
</td>
<th scope="row"><a title="Edit" href="#">32</a></th>
<td class="txp-list-col-title"><a title="Edit" href="#">Symbolism</a></td>
<td class="txp-list-col-posted date">11 Dec 2024 8:52 AM</td>
<td class="txp-list-col-lastmod date">09 Feb 2025 7:20 AM</td>
<td class="txp-list-col-expires date"> </td>
<td class="txp-list-col-section"><span title="De Stjl">De Stjl</span></td>
<td class="txp-list-col-category1 category"><span title="expressionism">Expressionism</span></td>
<td class="txp-list-col-category2 category"> </td>
<td class="txp-list-col-status"><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td class="txp-list-col-comments"><span class="comments-status">Off</span> <span class="comments-manage">(0)</span></td>
</tr>
<tr>
<td class="txp-list-col-multi-edit">
<input name="selected[]" class="checkbox" type="checkbox" value="31">
</td>
<th scope="row"><a title="Edit" href="#">31</a></th>
<td class="txp-list-col-title"><a title="Edit" href="#">Relational art</a></td>
<td class="txp-list-col-posted date">08 Jan 2025 9:28 AM</td>
<td class="txp-list-col-lastmod date">09 Feb 2025 7:35 AM</td>
<td class="txp-list-col-expires date"> </td>
<td class="txp-list-col-section"><span title="De Stjl">De Stjl</span></td>
<td class="txp-list-col-category1 category"><span title="expressionism">Expressionism</span></td>
<td class="txp-list-col-category2 category"> </td>
<td class="txp-list-col-status"><a rel="external" target="_blank" title="View" href="#">Live</a></td>
<td class="txp-list-col-comments"><span class="comments-status">Off</span> <span class="comments-manage">(0)</span></td>
</tr>
</tbody>
</table>
</div>