search

IJMacD / rfc3339-iso8601

https://ijmacd.github.io/rfc3339-iso8601
291 stars 11 forks source link

Make table headers sticky #8

Open waldyrious opened 2 years ago

waldyrious commented 2 years ago

For such a long table, it's helpful for the headers to stick to the top of the page when scrolling down.

This is accomplished with position:sticky, although the borders need to be made 1px thicker, as otherwise they wouldn't stick in place (see https://stackoverflow.com/a/53559396/266309).

Blank lines were also added between each declaration block, for consistency with the rest of the file.

waldyrious commented 2 years ago

Note: it would probably be preferable to move the inline styles from https://github.com/IJMacD/rfc3339-iso8601/blob/fdb9b01377547131dcc38773cc3ee0de7a5e79f3/src/FormatTable.js#L11-L14

to this CSS file, in the newly introduced .App-FormatTable tbody th block, like this:

 .App-FormatTable tbody th {
   top: 1.45em; /* when stickying, leave room for global table header */
+  background: #E5E5E5;
+  text-align: left;
 }

This would avoid having the styling scattered across multiple files.

If that's acceptable, I'd add the change to this PR.

IJMacD commented 2 years ago

Note: it would probably be preferable to move the inline styles from

https://github.com/IJMacD/rfc3339-iso8601/blob/fdb9b01377547131dcc38773cc3ee0de7a5e79f3/src/FormatTable.js#L11-L14

to this CSS file, in the newly introduced .App-FormatTable tbody th block, like this:

 .App-FormatTable tbody th {
   top: 1.45em; /* when stickying, leave room for global table header */
+  background: #E5E5E5;
+  text-align: left;
 }

This would avoid having the styling scattered across multiple files.

If that's acceptable, I'd add the change to this PR.

I agree it would definitely be better to move this style to CSS. I guess it's just one of those jobs I haven't got around to. I'd happily accept a PR for it.