Lock THEAD

by KirbyLWallace

HTML

<body onResize="scaleElements()">

	<div id="table-container-div">

    <table id="data-table">
      <thead id="th-header">
        <tr id="th-header-row">
          <td>Column1</td>
          <td>Column2</td>
          <td>Column3</td>
          <td>Column4</td>
        </tr>
      </thead>

      <tbody id="tbl-body">
        <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
        <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
        <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
        <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
        <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
        <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
        <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
        <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
        <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
        <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
       ...

CSS

body {
  background: black;
}

#table-container-div {
			width: 310px;
			position: absolute;
			top: 10px;
			bottom: 10px;
			overflow-x: hidden;
			overflow-y: auto;
			min-width: 320px;
		}

		table {
			font-size: 13px;
			height: 120px;
			width: 300px;
			border: 0px solid red;
			background-color: #11171F;
		}

		tr {
			height: 22px;
			color: #cff3ff;
		}

			tr:hover {
				background-color: dimgrey;
			}

		td {
		  color:white;
			border-right: 1px dotted #4F4F4F;
		}

		#th-header-row {
			background-color: #3D6588;
			color: white;
		}

JavaScript

(() => {
		scaleElements();  
	})();
		

  function scaleElements() {

		// element() is just shorthand for document.getElementById().

		// scaleElements() scales a number of other things, not included here, 
		// that get rescaled any time the browser, or a container is resized.
		// the table header row here is just one of them...
		//
		// this thing includes checks to see if a table with the table & thead 
		// is on the page.  If it is, it checks to see if the span container is
		// here (it's not on the first run, but it is on subsequent calls.  So, 
		// it adds it if it needs it, or reuses it if it's there.

		if (element("data-table")) {

			if (element("th-span-container")) {
				element("th-span-container").parentElement.removeChild(element("th-span-container"));
			}
      
			var x = document.createElement("div");
				x.id = "th-span-container";
				x.style.cssFloat = "left";
				x.style.position = "fixed";
				x.style.top = "10px";
        				
				// you will want to fiddle with your own particular positioning. 
				// this one is positioned to work on a table that is below a page 
				// logo banner.

			var tds = element("th-header-row").getElementsByTagName("td");

			for (i = 0; i < tds.length; i++) {

				let z = tds[i];
				let y = document.createElement("span");

				y.style.padding = "0px";
				y.style.margin = "0px";
				y.style.fontFamily = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
				y.style.fontSize = "13px";
				y.style.border = "0px";
				y.style.position = "absolute";
				y.style.color = "white";
				y.style.backgroundColor = "#3D6588";
				y.style.left = z.offsetLeft + "px";
				y.style.height = z.offsetHeight + "px";
				y.style.lineHeight = z.offsetHeight + "px";
				y.style.width = z.offsetWidth + "px";
				y.innerHTML = z.innerHTML;
				x.appendChild(y);

			}
      
			element("table-container-div").appendChild(x);
			element("th-header-row").style.visibility = "hidden";

		}

	}

function element(e) {
	return...