Horizontally scrolling table with fixed headings
For my Focal Length Equivalent utility, I created a alternative view for when you don’t have JavaScript enabled (as you should, if you can).
Instead of dynamically showing the conversion based on the position of the range slider input element, I simply show a good old table with calculated equivalents at pre-defined focal lengths.
I wanted this table to list the focal lengths vertically – with one film- or sensor-format on one row – so you can easily parse the result. As such a table gets easily too wide for the parent elements container, I wanted
- the table to be scrollable horizontally and
- have the format name headings keep their position, so that you never lose track of which row represents which format.
Here’s the simplified table markup:
<figure><table><tbody><!-- ... --><tr><th scope="row">35mm</th>
<td>10 mm</td>
<td>16 mm</td>
<td>24 mm</td>
<td>28 mm</td>
<td>35 mm</td>
<td>50 mm</td>
<td>85 mm</td>
<td>100 mm</td>
<td>135 mm</td>
<td>200 mm</td>
<td>300 mm</td>
<td>500 mm</td>
</tr><!-- ... --></tbody></table></figure>
The “scrolling” bit is easily done: simply put a overflow-x: scroll; on the table’s container element, which in my case is a <figure> element (a <div> or any other block element would also do of course, if the <figure> semantic doesn’t work for you):
figure {
overflow-x: scroll;
}
In order for the film-format name headings to keep their position, I resorted to a fairly new value of the CSS position property: sticky. I added this to the th selectors, in combination with left: 0; so the headings stay at their original positions:
figure table tr th {
position: sticky;
left: 0;
// you might also want a bg color, so the th covers the table
// that scrolls through underneath
background-color: white;
}
You can take a look at this when you go to the tool and disable JavaScript in your browser. Or you can simply look at this table here:
| Micro 4/3 | 5 mm | 8 mm | 12 mm | 15 mm | 18 mm | 26 mm | 44 mm | 52 mm | 70 mm | 104 mm | 156 mm | 260 mm |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| APS-C | 7 mm | 11 mm | 16 mm | 19 mm | 23 mm | 33 mm | 57 mm | 67 mm | 90 mm | 133 mm | 200 mm | 333 mm |
| 35mm | 10 mm | 16 mm | 24 mm | 28 mm | 35 mm | 50 mm | 85 mm | 100 mm | 135 mm | 200 mm | 300 mm | 500 mm |
| 6x4.5 | 16 mm | 26 mm | 39 mm | 45 mm | 56 mm | 81 mm | 137 mm | 161 mm | 217 mm | 322 mm | 483 mm | 805 mm |
| 6x6 | 18 mm | 29 mm | 44 mm | 51 mm | 64 mm | 92 mm | 155 mm | 183 mm | 247 mm | 366 mm | 548 mm | 915 mm |
| 6x7 | 20 mm | 32 mm | 48 mm | 56 mm | 71 mm | 101 mm | 171 mm | 202 mm | 272 mm | 404 mm | 604 mm | 1009 mm |
| 6x8 | 22 mm | 35 mm | 53 mm | 62 mm | 77 mm | 110 mm | 187 mm | 220 mm | 297 mm | 440 mm | 660 mm | 1100 mm |
| 6x9 | 23 mm | 37 mm | 56 mm | 65 mm | 82 mm | 117 mm | 198 mm | 233 mm | 315 mm | 467 mm | 700 mm | 1167 mm |
| 4x5 | 36 mm | 57 mm | 85 mm | 99 mm | 124 mm | 177 mm | 301 mm | 354 mm | 478 mm | 708 mm | 1061 mm | 1769 mm |
| 8x10 | 71 mm | 113 mm | 170 mm | 198 mm | 248 mm | 354 mm | 601 mm | 707 mm | 955 mm | 1415 mm | 2122 mm | 3537 mm |