Issue with scrollable table not rendering properly

WayneCa · January 6, 2025, 7:42pm

Here are the issues:

The table is supposed to be centered with the body margin (default) on all four sides. The bottom and right sides are against the bottom and right sides of the viewport.
The scrollbars are supposed to be attached to the table, not the viewport.
When scrolling the table, the contents of the scrollable portion of the table should not be visible in the margins on the top and left.
This all adds up to the table boundaries not being set to the appropriate size for the viewport, and the scrollbars not being attached to the table, although the table scrolls appropriately otherwise.

I have tried so many different things to find a solution I can’t remember them all to name them. The following is a portion of my code, as my webpage is very large (129K).

CSS

body {				border:					none;
					font-family:			Tahoma, sans-serif;
					font-size:				12.0pt;
					vertical-align:			bottom;
					white-space:			nowrap;
					color:					Black;
	}

/*div {				overflow:				scroll;
	}*/

table {				margin:					auto;
					border:					none;
					border-spacing:			0;
					border-collapse:		separate;
					width:					98%;
					height:					98%;
					table-layout:			fixed;
	}

/* freeze panes */
/* rows 1-3 */
thead {				position:				sticky;
					top:					8px;
					min-height:				35pt;
					height:					35pt;
					z-index:				50;
					overflow-x:				scroll;
	}
tbody {				top:					8px;
					left:					8px;
					overflow:				scroll;
	}

/* columns */
/* col 1 */
.posfixleft {		position:				sticky;
					top:					8px;
					left:					8px;
					height:					12pt;
					width:					35pt;
					z-index:				20;
	}

td {				padding-top:			1px;
					padding-right:			1px;
					padding-left:			1px;
					color:					Black;
	}

.nobrdr {			border-top:				none;
					border-right:			none;
					border-bottom:			none;
					border-left:			none;
	}
.top {				border-top:				.5pt solid Black;
					border-right:			none;
					border-bottom:			none;
					border-left:			none;
	}
.right {			border-top:				none;
					border-right:			.5pt solid Black;
					border-bottom:			none;
					border-left:			none;
	}
.bottom {			border-top:				none;
					border-right			:none;
					border-bottom:			.5pt solid Black;
					border-left:			none;
	}
.left {				border-top:				none;
					border-right			:none;
					border-bottom:			none;
					border-left:			.5pt solid Black;
	}

.topright {			border-top:				.5pt solid Black;
					border-right:			.5pt solid Black;
					border-bottom:			none;
					border-left:			none;
	}
.bottomright {		border-top:				none;
					border-right:			.5pt solid Black;
					border-bottom:			.5pt solid Black;
					border-left:			none;
	}
.topleft {			border-top:				.5pt solid Black;
					border-right:			none;
					border-bottom:			none;
					border-left:			.5pt solid Black;
	}
.bottomleft {		border-top:				none;
					border-right:			none;
					border-bottom:			.5pt solid Black;
					border-left:			.5pt solid Black;
	}

.rightleft {		border-top:				none;
					border-right:			.5pt solid Black;
					border-bottom:			none;
					border-left:			.5pt solid Black;
	}
.toprightleft {		border-top:				.5pt solid Black;
					border-right:			.5pt solid Black;
					border-bottom:			none;
					border-left:			.5pt solid Black;
	}
.bottomrightleft {	border-top:				none;
					border-right:			.5pt solid Black;
					border-bottom:			.5pt solid Black;
					border-left:			.5pt solid Black;
	}

.bold {				font-weight:			bold;
	}
.center {			text-align:				center;
	}

.indianred {		color:					#C65911;
					text-align:				center;
	}
.darkolivegreen {	color:					#548235;
					text-align:				center;
	}
.lightcyan {		background-color:		#DDEBF7;
	}
.palegreen {		background-color:		#E2EFDA;
	}

HTML

<TABLE style='width: 1917pt;'>
 <COL style='width:35pt'>
 <COL span=9 style='width:54pt'>
 <COL style='width:71pt'>
 <COL span=5 style='width:54pt'>
 <COL style='width:91pt'>
 <COL span=5 style='width:54pt'>
 <COL style='width:56pt'>
 <COL span=5 style='width:54pt'>
 <COL style='width:81pt'>
 <COL span=5 style='width:54pt'>
 <COL style='width:62pt'>
 <COL span=2 style='width:54pt'>
 <COL style='width:12pt'>
 <THEAD>
 <TR style='height: 15.0pt'>
  <TD class='posfixleft lightcyan bold center toprightleft' style='width: 35pt'>level</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>hbox5</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>yasc hbox</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>hbox5</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 179pt'>yasc hbox</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>hbox5</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 199pt'>yasc hbox</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>hbox5</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 164pt'>yasc hbox</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>hbox5</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 189pt'>yasc hbox</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>hbox5</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 178pt'>yasc hbox</TD>
  <TD class='bold center nobrdr'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft' style='width: 35pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 71pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 91pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 56pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 81pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 62pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='bold center nobrdr' style='width: 12pt'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center bottomrightleft' style='width: 35pt'></TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>0</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>QUICK</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>1</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 71pt'>EFFICIENT</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>2</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 91pt'>EFFICIENT++</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>3</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 56pt'>QUICK+</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>4</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 81pt'>EFFICIENT+</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>5</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 62pt'>SIMPLE+</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='bold center nobrdr' style='width: 12pt'></TD>
 </TR>
 </THEAD>
 <TBODY>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft' style='width:35pt'>1</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>383</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>383</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>428</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>428</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>392</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:81pt'>Solved</TD>
  <TD class='center' style='width:54pt'>367</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>297</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:71pt'>Solved</TD>
  <TD class='center' style='width:54pt'>297</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>315</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:81pt'>Solved</TD>
  <TD class='center' style='width:54pt'>315</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>293</TD>
  <TD class='center right' style='width:54pt'>99</TD>
  <TD class='darkolivegreen' style='width:62pt'>Solved</TD>
  <TD class='center' style='width:54pt'>293</TD>
  <TD class='center right' style='width:54pt'>99</TD>
  <TD class='bold center nobrdr' style='width:12pt'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>2</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>869</TD>
  <TD class='center right'>167</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>869</TD>
  <TD class='center right'>167</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>957</TD>
  <TD class='center right'>171</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>957</TD>
  <TD class='center right'>171</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>824</TD>
  <TD class='center right'>153</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>676</TD>
  <TD class='center right'>155</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>834</TD>
  <TD class='center right'>159</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>834</TD>
  <TD class='center right'>159</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>745</TD>
  <TD class='center right'>161</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>745</TD>
  <TD class='center right'>161</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>773</TD>
  <TD class='center right'>155</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>773</TD>
  <TD class='center right'>155</TD>
  <TD class='bold center nobrdr'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>3</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>730</TD>
  <TD class='center right'>150</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>730</TD>
  <TD class='center right'>150</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>672</TD>
  <TD class='center right'>148</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>672</TD>
  <TD class='center right'>148</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>630</TD>
  <TD class='center right'>154</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>543</TD>
  <TD class='center right'>154</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>666</TD>
  <TD class='center right'>150</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>666</TD>
  <TD class='center right'>150</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>588</TD>
  <TD class='center right'>162</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>588</TD>
  <TD class='center right'>162</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>543</TD>
  <TD class='center right'>154</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>543</TD>
  <TD class='center right'>154</TD>
  <TD class='bold center nobrdr'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>4</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1554</TD>
  <TD class='center right'>419</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1554</TD>
  <TD class='center right'>419</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1458</TD>
  <TD class='center right'>403</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1458</TD>
  <TD class='center right'>403</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1322</TD>
  <TD class='center right'>395</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1322</TD>
  <TD class='center right'>395</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='bold center nobrdr'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>5</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>869</TD>
  <TD class='center right'>171</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>869</TD>
  <TD class='center right'>171</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>753</TD>
  <TD class='center right'>189</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>753</TD>
  <TD class='center right'>189</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>708</TD>
  <TD class='center right'>173</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>702</TD>
  <TD class='center right'>173</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>881</TD>
  <TD class='center right'>189</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>881</TD>
  <TD class='center right'>189</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>731</TD>
  <TD class='center right'>159</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>731</TD>
  <TD class='center right'>159</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>712</TD>
  <TD class='center right'>173</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>712</TD>
  <TD class='center right'>173</TD>
  <TD class='bold center nobrdr'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>6</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>544</TD>
  <TD class='center right'>112</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>544</TD>
  <TD class='center right'>112</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>494</TD>
  <TD class='center right'>112</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>494</TD>
  <TD class='center right'>112</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>711</TD>
  <TD class='center right'>132</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>657</TD>
  <TD class='center right'>136</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>492</TD>
  <TD class='center right'>128</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>492</TD>
  <TD class='center right'>128</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>454</TD>
  <TD class='center right'>126</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>454</TD>
  <TD class='center right'>126</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>663</TD>
  <TD class='center right'>136</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>663</TD>
  <TD class='center right'>136</TD>
  <TD class='bold center nobrdr'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>7</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>653</TD>
  <TD class='center right'>144</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>653</TD>
  <TD class='center right'>144</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>665</TD>
  <TD class='center right'>124</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>665</TD>
  <TD class='center right'>124</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>649</TD>
  <TD class='center right'>170</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>663</TD>
  <TD class='center right'>184</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>597</TD>
  <TD class='center right'>172</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>597</TD>
  <TD class='center right'>172</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>573</TD>
  <TD class='center right'>172</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>573</TD>
  <TD class='center right'>172</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>541</TD>
  <TD class='center right'>158</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>541</TD>
  <TD class='center right'>158</TD>
  <TD class='bold center nobrdr'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>8</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1438</TD>
  <TD class='center right'>286</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1438</TD>
  <TD class='center right'>286</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1776</TD>
  <TD class='center right'>282</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1776</TD>
  <TD class='center right'>282</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1260</TD>
  <TD class='center right'>290</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='bold center nobrdr'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>9</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1008</TD>
  <TD class='center right'>279</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1008</TD>
  <TD class='center right'>279</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1088</TD>
  <TD class='center right'>281</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1088</TD>
  <TD class='center right'>281</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>794</TD>
  <TD class='center right'>249</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>834</TD>
  <TD class='center right'>249</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>944</TD>
  <TD class='center right'>277</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>944</TD>
  <TD class='center right'>277</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>782</TD>
  <TD class='center right'>249</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>782</TD>
  <TD class='center right'>249</TD>
  <TD class='bold center nobrdr'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center bottomrightleft'>90</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='bold center nobrdr'></TD>
 </TR>
 </TBODY>
</TABLE>

JeremyLT · January 6, 2025, 7:43pm

Please post your source code or a link to your source code.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

WayneCa · January 6, 2025, 7:49pm

Done. The code provided is the first 9 rows + the last row. Hopefully that will render both vertical and horizontal scrollbars.

WayneCa · January 7, 2025, 5:08pm

I have made some progress. I found that if I made the right column and bottom row fixed I get the margins on the right and bottom. However, the scrollbars are still attached to the viewport, not the table, as far as their location goes. They are attached to the table in that the table scrolls as expected when using the scrollbars. The overflow from the table is still visible in the margins, which is not what I want. The scrollbars should be within the area of the right column and bottom row of the table, but instead are at the extreme right and extreme bottom of the viewport, and instead of being the height and width of the table boundaries are the height and width of the viewport. I will add the code here to reflect my new changes.

CSS

body {				border:					none;
					font-family:			Tahoma, sans-serif;
					font-size:				12.0pt;
					vertical-align:			bottom;
					white-space:			nowrap;
					color:					Black;
					/*background-color:		Black;*/
	}

/*div {				overflow:				scroll;
	}*/

table {				margin:					auto;
					border:					none;
					border-spacing:			0;
					border-collapse:		separate;
					width:					98%;
					height:					98%;
					table-layout:			fixed;
	}

/* freeze panes */
/* rows 1-3 */
thead {				position:				sticky;
					top:					8px;
					min-height:				35pt;
					height:					35pt;
					z-index:				50;
					overflow-x:				scroll;
	}
tbody {				top:					8px;
					left:					8px;
					overflow-x:				scroll;
					overflow-y:				scroll;
	}

/* columns */
/* col 1 */
.posfixleft {		position:				sticky;
					left:					8px;
					height:					12pt;
					width:					35pt;
					z-index:				20;
	}
/* col 38 */
.posfixright {		position:				sticky;
					right:					8px;
					height:					12pt;
					width:					12pt;
					z-index:				20;
					background-color:		White;
	}
/* bottom row */
.posfixbottomleft {		position:				sticky;
					left:					8px;
					bottom:					8px;
					height:					8pt;
					width:					35pt;
					z-index:				30;
					background-color:		White;
	}
.posfixbottom {		position:				sticky;
					bottom:					8px;
					height:					8pt;
					z-index:				20;
					background-color:		White;
	}
.posfixbottomright {		position:				sticky;
					right:					8px;
					bottom:					8px;
					height:					8pt;
					width:					12pt;
					z-index:				20;
					background-color:		White;
	}

td {				padding-top:			1px;
					padding-right:			1px;
					padding-left:			1px;
					color:					Black;
	}

.nobrdr {			border-top:				none;
					border-right:			none;
					border-bottom:			none;
					border-left:			none;
	}
.top {				border-top:				.5pt solid Black;
					border-right:			none;
					border-bottom:			none;
					border-left:			none;
	}
.right {			border-top:				none;
					border-right:			.5pt solid Black;
					border-bottom:			none;
					border-left:			none;
	}
.bottom {			border-top:				none;
					border-right			:none;
					border-bottom:			.5pt solid Black;
					border-left:			none;
	}
.left {				border-top:				none;
					border-right			:none;
					border-bottom:			none;
					border-left:			.5pt solid Black;
	}

.topright {			border-top:				.5pt solid Black;
					border-right:			.5pt solid Black;
					border-bottom:			none;
					border-left:			none;
	}
.bottomright {		border-top:				none;
					border-right:			.5pt solid Black;
					border-bottom:			.5pt solid Black;
					border-left:			none;
	}
.topleft {			border-top:				.5pt solid Black;
					border-right:			none;
					border-bottom:			none;
					border-left:			.5pt solid Black;
	}
.bottomleft {		border-top:				none;
					border-right:			none;
					border-bottom:			.5pt solid Black;
					border-left:			.5pt solid Black;
	}

.rightleft {		border-top:				none;
					border-right:			.5pt solid Black;
					border-bottom:			none;
					border-left:			.5pt solid Black;
	}
.toprightleft {		border-top:				.5pt solid Black;
					border-right:			.5pt solid Black;
					border-bottom:			none;
					border-left:			.5pt solid Black;
	}
.bottomrightleft {	border-top:				none;
					border-right:			.5pt solid Black;
					border-bottom:			.5pt solid Black;
					border-left:			.5pt solid Black;
	}
.topbottomleft {	border-top:				.5pt solid Black;
					border-right:			none;
					border-bottom:			.5pt solid Black;
					border-left:			.5pt solid Black;
	}
.topbottomright {	border-top:				.5pt solid Black;
					border-right:			.5pt solid Black;
					border-bottom:			.5pt solid Black;
					border-left:			none;
	}
.topbottomrightleft {	border-top:				.5pt solid Black;
					border-right:			.5pt solid Black;
					border-bottom:			.5pt solid Black;
					border-left:			.5pt solid Black;
	}

.bold {				font-weight:			bold;
	}
.center {			text-align:				center;
	}

.indianred {		color:					#C65911;
					text-align:				center;
	}
.darkolivegreen {	color:					#548235;
					text-align:				center;
	}
.lightcyan {		background-color:		#DDEBF7;
	}
.palegreen {		background-color:		#E2EFDA;
	}

HTML

<TABLE>
 <COL style='width:35pt'>
 <COL span=9 style='width:54pt'>
 <COL style='width:71pt'>
 <COL span=5 style='width:54pt'>
 <COL style='width:91pt'>
 <COL span=5 style='width:54pt'>
 <COL style='width:56pt'>
 <COL span=5 style='width:54pt'>
 <COL style='width:81pt'>
 <COL span=5 style='width:54pt'>
 <COL style='width:62pt'>
 <COL span=2 style='width:54pt'>
 <COL style='width:12pt'>
 <THEAD>
 <TR style='height: 15.0pt'>
  <TD class='posfixleft lightcyan bold center toprightleft' style='width: 35pt'>level</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>hbox5</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>yasc hbox</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>hbox5</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 179pt'>yasc hbox</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>hbox5</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 199pt'>yasc hbox</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>hbox5</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 164pt'>yasc hbox</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>hbox5</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 189pt'>yasc hbox</TD>
  <TD colspan=3 class='palegreen bold center topright' style='width: 162pt'>hbox5</TD>
  <TD colspan=3 class='palegreen bold center top' style='width: 178pt'>yasc hbox</TD>
  <TD class='posfixright palegreen bold center toprightleft'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft' style='width: 35pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 71pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 91pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 56pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 81pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center right' style='width: 54pt'>pushes</TD>
  <TD class='palegreen bold center nobrdr' style='width: 62pt'></TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>moves</TD>
  <TD class='palegreen bold center nobrdr' style='width: 54pt'>pushes</TD>
  <TD class='posfixright palegreen bold center rightleft' style='width: 12pt'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center bottomrightleft' style='width: 35pt'></TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>0</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>QUICK</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>1</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 71pt'>EFFICIENT</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>2</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 91pt'>EFFICIENT++</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>3</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 56pt'>QUICK+</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>4</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 81pt'>EFFICIENT+</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 54pt'>5</TD>
  <TD colspan=2 class='palegreen bold center bottomright' style='width: 108pt'>abort reason</TD>
  <TD class='palegreen bold center bottom' style='width: 62pt'>SIMPLE+</TD>
  <TD colspan=2 class='palegreen bold center bottom' style='width: 108pt'>abort reason</TD>
  <TD class='posfixright palegreen bold center bottomrightleft' style='width: 12pt'></TD>
 </TR>
 </THEAD>
 <TBODY>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft' style='width:35pt'>1</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>383</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>383</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>428</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>428</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>392</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:81pt'>Solved</TD>
  <TD class='center' style='width:54pt'>367</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>297</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:71pt'>Solved</TD>
  <TD class='center' style='width:54pt'>297</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>315</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:81pt'>Solved</TD>
  <TD class='center' style='width:54pt'>315</TD>
  <TD class='center right' style='width:54pt'>101</TD>
  <TD class='darkolivegreen' style='width:54pt'>Solved</TD>
  <TD class='center' style='width:54pt'>293</TD>
  <TD class='center right' style='width:54pt'>99</TD>
  <TD class='darkolivegreen' style='width:62pt'>Solved</TD>
  <TD class='center' style='width:54pt'>293</TD>
  <TD class='center right' style='width:54pt'>99</TD>
  <TD class='posfixright bold center rightleft' style='width:12pt'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>2</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>869</TD>
  <TD class='center right'>167</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>869</TD>
  <TD class='center right'>167</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>957</TD>
  <TD class='center right'>171</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>957</TD>
  <TD class='center right'>171</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>824</TD>
  <TD class='center right'>153</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>676</TD>
  <TD class='center right'>155</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>834</TD>
  <TD class='center right'>159</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>834</TD>
  <TD class='center right'>159</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>745</TD>
  <TD class='center right'>161</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>745</TD>
  <TD class='center right'>161</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>773</TD>
  <TD class='center right'>155</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>773</TD>
  <TD class='center right'>155</TD>
  <TD class='posfixright bold center rightleft'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>3</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>730</TD>
  <TD class='center right'>150</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>730</TD>
  <TD class='center right'>150</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>672</TD>
  <TD class='center right'>148</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>672</TD>
  <TD class='center right'>148</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>630</TD>
  <TD class='center right'>154</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>543</TD>
  <TD class='center right'>154</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>666</TD>
  <TD class='center right'>150</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>666</TD>
  <TD class='center right'>150</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>588</TD>
  <TD class='center right'>162</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>588</TD>
  <TD class='center right'>162</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>543</TD>
  <TD class='center right'>154</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>543</TD>
  <TD class='center right'>154</TD>
  <TD class='posfixright bold center rightleft'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>4</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1554</TD>
  <TD class='center right'>419</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1554</TD>
  <TD class='center right'>419</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1458</TD>
  <TD class='center right'>403</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1458</TD>
  <TD class='center right'>403</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1322</TD>
  <TD class='center right'>395</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1322</TD>
  <TD class='center right'>395</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='posfixright bold center rightleft'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>5</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>869</TD>
  <TD class='center right'>171</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>869</TD>
  <TD class='center right'>171</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>753</TD>
  <TD class='center right'>189</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>753</TD>
  <TD class='center right'>189</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>708</TD>
  <TD class='center right'>173</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>702</TD>
  <TD class='center right'>173</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>881</TD>
  <TD class='center right'>189</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>881</TD>
  <TD class='center right'>189</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>731</TD>
  <TD class='center right'>159</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>731</TD>
  <TD class='center right'>159</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>712</TD>
  <TD class='center right'>173</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>712</TD>
  <TD class='center right'>173</TD>
  <TD class='posfixright bold center rightleft'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>6</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>544</TD>
  <TD class='center right'>112</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>544</TD>
  <TD class='center right'>112</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>494</TD>
  <TD class='center right'>112</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>494</TD>
  <TD class='center right'>112</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>711</TD>
  <TD class='center right'>132</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>657</TD>
  <TD class='center right'>136</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>492</TD>
  <TD class='center right'>128</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>492</TD>
  <TD class='center right'>128</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>454</TD>
  <TD class='center right'>126</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>454</TD>
  <TD class='center right'>126</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>663</TD>
  <TD class='center right'>136</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>663</TD>
  <TD class='center right'>136</TD>
  <TD class='posfixright bold center rightleft'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>7</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>653</TD>
  <TD class='center right'>144</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>653</TD>
  <TD class='center right'>144</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>665</TD>
  <TD class='center right'>124</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>665</TD>
  <TD class='center right'>124</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>649</TD>
  <TD class='center right'>170</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>663</TD>
  <TD class='center right'>184</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>597</TD>
  <TD class='center right'>172</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>597</TD>
  <TD class='center right'>172</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>573</TD>
  <TD class='center right'>172</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>573</TD>
  <TD class='center right'>172</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>541</TD>
  <TD class='center right'>158</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>541</TD>
  <TD class='center right'>158</TD>
  <TD class='posfixright bold center rightleft'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>8</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1438</TD>
  <TD class='center right'>286</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1438</TD>
  <TD class='center right'>286</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1776</TD>
  <TD class='center right'>282</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1776</TD>
  <TD class='center right'>282</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1260</TD>
  <TD class='center right'>290</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='posfixright bold center rightleft'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center rightleft'>9</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1008</TD>
  <TD class='center right'>279</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1008</TD>
  <TD class='center right'>279</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1088</TD>
  <TD class='center right'>281</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>1088</TD>
  <TD class='center right'>281</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>794</TD>
  <TD class='center right'>249</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>834</TD>
  <TD class='center right'>249</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>944</TD>
  <TD class='center right'>277</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>944</TD>
  <TD class='center right'>277</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='indianred'>Unsolved</TD>
  <TD colspan=2 class='center right'>time limit</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>782</TD>
  <TD class='center right'>249</TD>
  <TD class='darkolivegreen'>Solved</TD>
  <TD class='center'>782</TD>
  <TD class='center right'>249</TD>
  <TD class='posfixright bold center rightleft'></TD>
 </TR>
 <TR style='height:15.0pt'>
  <TD class='posfixleft lightcyan bold center bottomrightleft'>90</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='indianred bottom'>Unsolved</TD>
  <TD colspan=2 class='center bottomright'>time limit</TD>
  <TD class='posfixright bold center bottomrightleft'></TD>
 </TR><TR style='height:8.0pt'>
  <TD class='posfixbottomleft topbottomleft'>&nbsp;</TD>
  <TD colspan=36 class='posfixbottom topbottomright'>&nbsp;</TD>
  <TD class='posfixbottomright topbottomrightleft'>&nbsp;</TD>
 </TR>
 </TBODY>
</TABLE>

lasjorg · January 7, 2025, 7:11pm

I think you need an outer container for the overflow scroll.

Example:

WayneCa · January 7, 2025, 7:22pm

I tried that. I had to un-comment the code to try it again in order to refresh my memory of why it didn’t work.

The div adds more of a margin around the table.
The scrollbars are still the width and height of the viewport.
The fixed portions of the table are no longer fixed. They scroll with the rest of the table.

WayneCa · January 7, 2025, 8:44pm

I decided to make an image of what I want the table to look like in the browser. This is for those who may not be getting what I’m after. Now, this is on my browser (FireFox) at my screen resolution (1920x1080, scaled to 125% due to my eyesight). While I know that people with lower resolutions won’t see as much of the table as I do, and people with higher resolutions will see more of the table than I do, I hope to be able to make the amount of viewport margin they see the same. I’m not sure how to do that yet, but right now I’m just focusing on getting the table to look the way I want in my browser.

WayneCa · January 8, 2025, 11:01pm

I have figured it out, except for the scrollbars being where I want them. However, I can accept the way the page looks now.

WayneCa · January 8, 2025, 11:01pm

WayneCa · January 8, 2025, 11:05pm

It required a rewrite of the CSS and removing all of the style=‘width’ attributes from the first four rows (in addition to removing all of the COL tags).

CSS

body {				border:					none;
					font-family:			Tahoma, sans-serif;
					font-size:				12.0pt;
					vertical-align:			bottom;
					white-space:			nowrap;
					color:					Black;
	}

div {				margin:					auto;
					width:					98.25vw;
					height:					95.75vh;
					padding-top:			0;
					padding-right:			12px;
					padding-bottom:			12px;
					padding-left:			0;
					overflow:				scroll;
	}
table {				table-layout:			auto;
					border-collapse:		separate;
					border-spacing:			0;
					border:					none;
					overflow:				hidden;
	}
th, td {			padding:				0 5px;
					color:					Black;
	}
td {				text-align:				center;
	}

/* freeze panes */
/* rows 1-3 */
thead {				position:				sticky;
					top:					0;
					min-height:				35pt;
					height:					35pt;
					z-index:				50;
					overflow-x:				scroll;
	}

/* column 1 */
.posfixleft {		position:				sticky;
					left:					0;
					height:					12pt;
					width:					41pt;
					z-index:				20;
	}

Topic		Replies	Views
Help with formatting issue CSS HTML-CSS	4	269	October 15, 2021
Weird media query problem technical document HTML-CSS	5	599	July 21, 2021
Tech Documentation Page - scrollbar? HTML-CSS	7	257	February 14, 2022
Issues with height/scroll on fixed element (Technical documentation ) HTML-CSS	3	981	May 31, 2021
Documentation Page scrolling bug HTML-CSS	5	638	March 9, 2021

Issue with scrollable table not rendering properly

Related topics