add stickycolumns - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit 70528b22dba5557afeb49d379101a971be21f86c
(DIR) parent 13a12137bb28679d37ce6672224e714ba0ab24dd
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Wed, 1 Feb 2023 18:38:56 +0100
add stickycolumns
Diffstat:
A stickycolumns/README | 4 ++++
A stickycolumns/example.html | 75 +++++++++++++++++++++++++++++++
2 files changed, 79 insertions(+), 0 deletions(-)
---
(DIR) diff --git a/stickycolumns/README b/stickycolumns/README
@@ -0,0 +1,4 @@
+sticky table columns
+
+When scrolling and the table contents are out-of-view the table columns are
+kept at a sticky position.
(DIR) diff --git a/stickycolumns/example.html b/stickycolumns/example.html
@@ -0,0 +1,75 @@
+<style type="text/css">
+table tr th {
+ position: sticky;
+ top: 0; /* depends on padding of parent element */
+ /* fixup borders for sticky th cells */
+ border: 0 !important;
+ outline: 1px solid #ddd;
+}
+
+/* optional styling for the example: not needed to make it sticky */
+table { border-collapse: collapse; }
+th { background-color: #eee; }
+td { background-color: #fff; }
+th, td { border: 1px solid #ddd; }
+
+</style>
+
+<h1>Table 1</h1>
+
+<table>
+<thead>
+ <tr><th>Column 1</th><th>Column 2</th></tr>
+</thead>
+<tbody>
+ <tr><td>row 1, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 2, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 3, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 4, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 5, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 6, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 7, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 8, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 9, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 10, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 12, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 13, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 14, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 15, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 16, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 17, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 18, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 19, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 20, cell 1</td><td>row 1 cell 2</td></tr>
+</tbody>
+</table>
+
+
+<h1>Table 2</h1>
+
+<table>
+<thead>
+ <tr><th>Column 1</th><th>Column 2</th></tr>
+</thead>
+<tbody>
+ <tr><td>row 1, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 2, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 3, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 4, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 5, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 6, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 7, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 8, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 9, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 10, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 12, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 13, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 14, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 15, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 16, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 17, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 18, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 19, cell 1</td><td>row 1 cell 2</td></tr>
+ <tr><td>row 20, cell 1</td><td>row 1 cell 2</td></tr>
+</tbody>
+</table>