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;
overflow: hidden;
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 %*/
/*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-size: 15px;
line-height: 20px;
padding-top: 20px; /*this determines top caption height*/
padding-bottom: 20px; /*this determines bottom caption height*/
line-height: 25px;
padding-top: 25px; /*this determines top caption height*/
padding-bottom: 25px; /*this determines bottom caption height*/
text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
@ -19,7 +19,7 @@
position: relative;
border-top: 1px solid black; /*top table border*/
height: 100%;
padding-top: 20px; /*this determines column header height*/
padding-top: 25px; /*this determines column header height*/
}
.scrollingtable > div:before {
top: 0;
@ -45,22 +45,22 @@
.scrollingtable > div > div > table {
width: 100%;
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*/
}
.scrollingtable > div > div > table > caption {
position: absolute;
top: -20px; /*inverse of caption height*/
top: -25px; /*inverse of caption height*/
margin-top: -1px; /*inverse of border-width*/
width: 100%;
font-weight: bold;
text-align: center;
text-align: left;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
vertical-align: bottom;
white-space: nowrap;
text-align: center;
text-align: left;
}
.scrollingtable > div > div > table > thead > tr > * > div {
display: inline-block;
@ -71,7 +71,7 @@
position: absolute;
top: 0;
left: 0;
height: 20px; /*match column header height*/
height: 25px; /*match column header height*/
border-left: 1px solid black; /*leftmost header border*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
@ -87,7 +87,7 @@
.scrollingtable > div > div > table > thead > tr > * + :before {
content: "";
display: block;
min-height: 20px; /*match column header height*/
min-height: 25px; /*match column header height*/
padding-top: 1px;
border-left: 1px solid black; /*borders between header cells*/
}
@ -111,7 +111,7 @@
.scrollingtable > div > div > table > tbody > tr > * {
border-bottom: 1px solid black;
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 > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/