.scrollingtable { box-sizing: border-box; display: inline-block; vertical-align: middle; overflow: hidden; width: auto; /*set table width here if using fixed value*/ 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 */ font-family: Verdana, Tahoma, sans-serif; font-size: 15px; line-height: 25px; padding-top: 25px; /*this determines top caption height*/ padding-bottom: 25px; /*this determines bottom caption height*/ text-align: left; } #button_delete_all_jobs{ margin-top: 25px; } .scrollingtable * {box-sizing: border-box;} .scrollingtable > div { position: relative; border-top: 1px solid black; /*top table border*/ height: 100%; padding-top: 25px; /*this determines column header height*/ } .scrollingtable > div:before { top: 0; background: cornflowerblue; /*column header background color*/ } .scrollingtable > div:before, .scrollingtable > div > div:after { content: ""; position: absolute; z-index: -1; width: 100%; height: 50%; left: 0; } .scrollingtable > div > div { /*min-height: 43px;*/ /*if using % height, make this at least large enough to fit scrollbar arrows*/ max-height: 200px; overflow: scroll; /*set to auto if using fixed or % width; else scroll*/ overflow-x: hidden; border: 1px solid black; /*border around table body*/ } .scrollingtable > div > div:after {background: white;} /*match page background color*/ .scrollingtable > div > div > table { width: 100%; border-spacing: 0; margin-top: -25px; /*inverse of column header height*/ /*margin-right: 17px;*/ /*uncomment if using % width*/ } .scrollingtable > div > div > table > caption { position: absolute; top: -25px; /*inverse of caption height*/ margin-top: -1px; /*inverse of border-width*/ width: 100%; font-weight: bold; text-align: left; } .scrollingtable > div > div > table > * > tr > * {padding: 0;} .scrollingtable > div > div > table > thead { vertical-align: bottom; white-space: nowrap; text-align: left; } .scrollingtable > div > div > table > thead > tr > * > div { display: inline-block; padding: 0 6px 0 6px; /*header cell padding*/ } .scrollingtable > div > div > table > thead > tr > :first-child:before { content: ""; position: absolute; top: 0; left: 0; height: 25px; /*match column header height*/ border-left: 1px solid black; /*leftmost header border*/ } .scrollingtable > div > div > table > thead > tr > * > div[label]:before, .scrollingtable > div > div > table > thead > tr > * > div > div:first-child, .scrollingtable > div > div > table > thead > tr > * + :before { position: absolute; top: 0; white-space: pre-wrap; color: white; /*header row font color*/ } .scrollingtable > div > div > table > thead > tr > * > div[label]:before, .scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);} .scrollingtable > div > div > table > thead > tr > * + :before { content: ""; display: block; min-height: 25px; /*match column header height*/ padding-top: 1px; border-left: 1px solid black; /*borders between header cells*/ } .scrollingtable .scrollbarhead {float: right;} .scrollingtable .scrollbarhead:before { position: absolute; width: 100px; top: -1px; /*inverse border-width*/ background: white; /*match page background color*/ } .scrollingtable > div > div > table > tbody > tr:after { content: ""; display: table-cell; position: relative; padding: 0; border-top: 1px solid black; top: -1px; /*inverse of border width*/ } .scrollingtable > div > div > table > tbody {vertical-align: top;} .scrollingtable > div > div > table > tbody > tr {background: white;} .scrollingtable > div > div > table > tbody > tr > * { border-bottom: 1px solid black; padding: 0 6px 0 6px; 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*/ .scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/