.topbuttons{ grid-area: 1 / 1 / span 1 / span 10; } .select { grid-area: 2 / 1 / span 1 / span 10; } .indextable { grid-area: 3 / 1 / span 1 / span 10; } body { overflow:hidden; } .grid-container { display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto; grid-template-rows: auto auto auto auto; grid-gap: 10px; background-image: linear-gradient(rgb(143,178,221),rgb(45,87,139)); padding: 10px; } a.black { color: black; } a.blue { color: blue; } a.red { color: red; } a.redbutton, button.redbutton { background: rgb(217,195,188); color: black; padding: 0 10px; text-align: center; text-decoration: none; border-radius: 5px; display: inline-block; cursor: pointer; } a.bluebutton, button.bluebutton { background: rgb(169,188,203); padding: 0 10px; color: black; text-align: center; text-decoration: none; border-radius: 5px; display: inline-block; } a.greybutton { background: rgb(233,233,237); padding: 2px 10px; color: black; text-align: center; border-radius: 5px; text-decoration: none; display: inline-block; cursor: pointer; } .indent { padding-left: 20px; } .border { border: 1px solid black; border-collapse: collapse; } tbody { overflow-y: auto; } .index { width: 100%; background: rgb(255,255,255); text-align: left; padding: 0 5px 5px 5px; font-size: 15px; } .indexhead { background: rgb(240,240,240); text-align: left; font-size: 15px; } .indexheaddate { background: rgb(240,240,240); text-align: left; font-size: 15px; width: 80px; } .indexblack { background: rgb(255,255,255); text-align: left; font-size: 15px; color: black; text-decoration: none; } .indexblue { background: rgb(255,255,255); text-align: left; font-size: 15px; color: blue; text-decoration: none; } .indexred { background: rgb(255,255,255); text-align: left; font-size: 15px; color: red; text-decoration: none; } .table-scroll { display: block; empty-cells: show; overflow-y: scroll; } .body-half-screen{ max-height: 60vh; }