From 0ed508f70dd9af6204914a07ae637a46a5a48c6e Mon Sep 17 00:00:00 2001 From: schrom01 Date: Sat, 27 Aug 2022 21:01:50 +0200 Subject: [PATCH] styling of scrolling Table --- Webserver/static/Styles/scrollingTable.css | 26 +++++++++++----------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/Webserver/static/Styles/scrollingTable.css b/Webserver/static/Styles/scrollingTable.css index c43fba8..9a3203b 100644 --- a/Webserver/static/Styles/scrollingTable.css +++ b/Webserver/static/Styles/scrollingTable.css @@ -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*/