Roman_Schenk
/
Bewaesserungsanlage
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

styling of scrolling Table

This commit is contained in:
schrom01 2022-08-27 21:01:50 +02:00
parent ab12bf7b02
commit 0ed508f70d
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Webserver/static/Styles/scrollingTable.css
View File

@ -4,14 +4,14 @@
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
width: auto; /*set table width here if using fixed value*/ width: auto; /*set table width here if using fixed value*/
/*min-width: 100%;*/ /*set table width here if using %*/ min-width: 100%; /*set table width here if using %*/
height: 300px; /*set table height here; can be fixed value or %*/ height: 300px; /*set table height here; can be fixed value or %*/
/*min-height: 104px;*/ /*if using % height, make this at least large enough to fit scrollbar arrows + captions + thead*/ min-height: 104px; if using % height, make this at least large enough to fit scrollbar arrows + captions + thead
font-family: Verdana, Tahoma, sans-serif; font-family: Verdana, Tahoma, sans-serif;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 25px;
padding-top: 20px; /*this determines top caption height*/ padding-top: 25px; /*this determines top caption height*/
padding-bottom: 20px; /*this determines bottom caption height*/ padding-bottom: 25px; /*this determines bottom caption height*/
text-align: left; text-align: left;
} }
.scrollingtable * {box-sizing: border-box;} .scrollingtable * {box-sizing: border-box;}
@ -19,7 +19,7 @@
position: relative; position: relative;
border-top: 1px solid black; /*top table border*/ border-top: 1px solid black; /*top table border*/
height: 100%; height: 100%;
padding-top: 20px; /*this determines column header height*/ padding-top: 25px; /*this determines column header height*/
} }
.scrollingtable > div:before { .scrollingtable > div:before {
top: 0; top: 0;
@ -45,22 +45,22 @@
.scrollingtable > div > div > table { .scrollingtable > div > div > table {
width: 100%; width: 100%;
border-spacing: 0; border-spacing: 0;
margin-top: -20px; /*inverse of column header height*/ margin-top: -25px; /*inverse of column header height*/
/*margin-right: 17px;*/ /*uncomment if using % width*/ /*margin-right: 17px;*/ /*uncomment if using % width*/
} }
.scrollingtable > div > div > table > caption { .scrollingtable > div > div > table > caption {
position: absolute; position: absolute;
top: -20px; /*inverse of caption height*/ top: -25px; /*inverse of caption height*/
margin-top: -1px; /*inverse of border-width*/ margin-top: -1px; /*inverse of border-width*/
width: 100%; width: 100%;
font-weight: bold; font-weight: bold;
text-align: center; text-align: left;
} }
.scrollingtable > div > div > table > * > tr > * {padding: 0;} .scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead { .scrollingtable > div > div > table > thead {
vertical-align: bottom; vertical-align: bottom;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: left;
} }
.scrollingtable > div > div > table > thead > tr > * > div { .scrollingtable > div > div > table > thead > tr > * > div {
display: inline-block; display: inline-block;
@ -71,7 +71,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 20px; /*match column header height*/ height: 25px; /*match column header height*/
border-left: 1px solid black; /*leftmost header border*/ border-left: 1px solid black; /*leftmost header border*/
} }
.scrollingtable > div > div > table > thead > tr > * > div[label]:before, .scrollingtable > div > div > table > thead > tr > * > div[label]:before,
@ -87,7 +87,7 @@
.scrollingtable > div > div > table > thead > tr > * + :before { .scrollingtable > div > div > table > thead > tr > * + :before {
content: ""; content: "";
display: block; display: block;
min-height: 20px; /*match column header height*/ min-height: 25px; /*match column header height*/
padding-top: 1px; padding-top: 1px;
border-left: 1px solid black; /*borders between header cells*/ border-left: 1px solid black; /*borders between header cells*/
} }
@ -111,7 +111,7 @@
.scrollingtable > div > div > table > tbody > tr > * { .scrollingtable > div > div > table > tbody > tr > * {
border-bottom: 1px solid black; border-bottom: 1px solid black;
padding: 0 6px 0 6px; padding: 0 6px 0 6px;
height: 20px; /*match column header height*/ height: 25px; /*match column header height*/
} }
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;} .scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/ .scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/