Freeze top column (title columns) - css

Question

In a node.js application: Is there a way to freeze the top row in a table, the title row, in the browser the way you can in Excel?
I suspect this is a .css style, but not sure how to do it. fixed "freezes" the entire table instead of just the top row in that as items appear in the non-visible part of the browser window, no vertical scroll bars appear so as to be able to see them. sticky appears to do nothing in this case.
.css
#one {
position: fixed;
top: 100px;
left: 15px;
}
app.js
<div className="row" id="one">
<table className="table-hover">
<thead>

Answer 1

Here's a solution of an Excel-like fixed table head with position: sticky; (classy and a personal favorite). Click on the first row to make it sticky:
th, td {
width: 100px;
height: 100px;
background-color: #eee;
text-align: center;
border-bottom: 2px solid transparent;
}
tr.sticks {
cursor: pointer;
}
tr.stuck th {
position: sticky;
top: 0px;
border-bottom: 2px solid #000;
}
<table>
<tbody>
<tr class="sticks" onclick='this.className = this.className == "sticks" ? "sticks stuck" : "sticks";'>
<th> Name </th>
<th> Amount </th>
<th> Date </th>
<th> Color </th>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
</tbody>
</table>
And here's a solution using JavaScript (less classy but with more usability). This one supports more than one row being stuck to the top. Again, click on a row to stick it:
td {
width: 100px;
height: 100px;
background-color: #eee;
text-align: center;
border-bottom: 2px solid transparent;
}
#table-head {
top: 0px;
position: fixed;
}
#table-head td {
border-bottom: 2px solid #000;
background-color: #ddd;
}
<table id="table">
<thead id="table-head"></thead>
<tbody id="table-body">
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var table_head = document.getElementById("table-head");
var table_body = document.getElementById("table-body");
var stick_it = function(el) {
var row_html = el.outerHTML.replace("stick_it(this);", "unstick_it(this);");
el.remove();
table_head.innerHTML += row_html;
table.style.paddingTop = table_head.children.length * 104 + "px";
}
var unstick_it = function(el) {
var row_html = el.outerHTML.replace("unstick_it(this);", "stick_it(this);");
el.remove();
table_body.innerHTML += row_html;
table.style.paddingTop = table_head.children.length * 104 + "px";
}
</script>