HTML Table with Sticky Header Row and Sticky First Column

Nice work by Chris Coyier:

I tried this on a table before and would swear it didn’t work back then. Perhaps I did something wrong, because it’s quite tricky as Chris details:

The “trick” at play here is partially the position: sticky; usage, but moreso to me, how you have to handle overlapping elements. A table cell that is sticky needs to have a background, because otherwise we’ll see overlapping content. It also needs proper z-index handling so that when it sticks in place, it’ll be on top of what it is supposed to be on top of.

A table with both a sticky header and a sticky first column →

Ordering tabular data with only CSS thanks to CSS Variables

Neat experiment by Roman Komarov in which he orders tabular data using just HTML/CSS, thanks to the use of CSS Custom Properties (CSS Variables):

Each cell of each row is given a specific value to sort on.

<tr
  class="table-row"
  style="
    --order-by-published: 161221;
    --order-by-views: 2431;
  ">
  <th class="table-cell">
    <a href="http://kizu.ru/en/fun/controlling-the-specificity/">Controlling the Specificity</a>
  </th>
  <td class="table-cell">2016-12-21</td>
  <td class="table-cell">2 431</td>
</tr>

When selecting a specific column, that value is aliased to the --order CSS Variable

#sort-by-published:checked ~ .table > .table-body > .table-row {
  --order: var(--order-by-published);
}

#sort-by-views:checked ~ .table > .table-body > .table-row {
  --order: var(--order-by-views);
}

And that --orderorder of each row:

.table-row {
  order: var(--order);
}

Add in an extra condition to use in the calculation and you can achieve a reverse sorting:

.table-row {
  order: calc(var(--order) * var(--sort-order, -1));
}

Very nice!

As Roman notes though, this isn’t great when it comes to a11y:

This so­lu­tion is not re­ally a so­lu­tion, but an ex­per­i­ment, and can be bad for ac­ces­si­bil­ity — right now its not pos­si­ble to re­order stuff in a way it would be ac­ces­si­ble with key­board (with­out con­fus­ing tele­port­ing fo­cus) or screen read­ers.

Roman Komarov: Variable Order →

Responsive tables with Tablesaw

stack

Set of jQuery plugins by the clever folks of Filament Group for responsive tables. Comes with a few solutions such as stack (picture above), Toggle (where one can choose which columns to show), and Swipe (where you can scroll horizontally through the columns). Columns can also be sorted. Just set some data-* attributes on your table and it’ll all Just Work™

<table data-mode="stack">

Tablesaw →
Tablesaw Kitchen Sink Demo →