style.css

/* functional part of CSS for the table with fixed key-parts */
.sTable {
  overflow: auto;
  max-height: 97vh; /* any but must be limited */
}
.sTable table {
  width: 100%; /* if you want scroll to stay close */
  border-spacing: 0; /* 1px is nice too */
}
.sTable tr>* {
  white-space: nowrap; /* best to enable wrap per specific column/row */
  border: 1px solid;
  background: white;
}
.sTable th:first-child, .sTable tr:only-child>* {position: sticky}
.sTable thead th {top: 0}
.sTable th:first-child {left: 0}
.sTable tfoot tr>* {bottom: 0}
.sTable tr:only-child th:first-child {z-index: 1}


/* for better readability */
body {font: 1rem Trebuchet MS, Helvetica, sans-serif}
tr>* {padding: 1px 5px 2px 6px}
.sTable {border: 1px solid}


/* for styled scrolls */
::-webkit-scrollbar {width: 8px; height: 8px}
::-webkit-scrollbar-corner {background: black}
::-webkit-scrollbar-track {background: black}
::-webkit-scrollbar-thumb {
  background: white;
  border: 1px solid;
  border-left-width: 2px;
  border-right-width: 0
}


/* for distinctive shades of gray */
.sTable tbody tr:nth-child(odd)>td {color: #444}
.sTable tbody tr:nth-child(even)>td {background: #e6e6e6}
.sTable tbody th {background: lightgray}
.sTable thead th {
  background: gray;
  color: white;
  border-color: black
}
.sTable tfoot tr>* {
  background: darkgray;
  text-align: right
}
::-webkit-scrollbar-thumb {background: lightgray}


/* for consistency in border widths etc. */
.sTable {border-right-width: 2px}
.sTable thead th {border-bottom-width: 2px}
.sTable tfoot tr>* {border-top-width: 2px}
.sTable th:first-child {border-right-width: 2px}
.sTable tr>*:last-child {border-right-width: 0}
.sTable tbody tr:first-child>* {border-top-width: 0}
.sTable tbody tr:last-child>* {border-bottom-width: 0}
.sTable tr>*:nth-child(2) {border-left-width: 0}


/* center cells */
td { text-align: center }