 |
add stickycolumns - jscancer - Javascript crap (relatively small) |
 |
git clone git://git.codemadness.org/jscancer |
 |
Log |
|
Files |
|
Refs |
|
README |
|
LICENSE |
|
--- |
|
commit 70528b22dba5557afeb49d379101a971be21f86c |
|
parent 13a12137bb28679d37ce6672224e714ba0ab24dd |
|
Author: Hiltjo Posthuma <[email protected]> |
|
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(-) |
|
--- |
|
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. |
|
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> |
