So I'm trying to create a table with a fixed first row (header) and first column, like how one would freeze panes in excel. I've tried looking at other users' posts and the corresponding answers to try and replicate the code for my table, but haven't had any luck. Upon scrolling horizontally (right/left) I would like the entire first column to stay fixed -- much like how the "position: sticky;" property works. Upon scrolling vertically (up/down) I would like the entire first row to stay fixed -- in the same manner.
Below is the basic code for my table. I also have a nav bar in my code, but don't think that should have an impact on this code.
Also, I am populating the table using Ajax/JQuery and used a unqiue Ajax call for each table which is why I'm using two tables to display this data. If I need all the data in one table in order to have the first row and column to be fixed, please let me know. I manually entered the data below for the purposes of visual aid.
Thank you in advance ! Please let me know if you have any questions or want to see more of the code.
body {
padding: 0;
margin: 0;
background: url("../images/march-madness-background.jpg") no-repeat center center fixed;
background-size: cover;
color: #000;
margin-top: 44px;
}
:root {
--primary-color: #1993e7;
--secondary-color: #147abd;
}
table,
tr,
td {
border-collapse: collapse;
border: 2px solid var(--secondary-color);
background-color: #fff;
color: #000;
width: 155px;
min-width: 155px;
height: 22px;
overflow: hidden;
/*position: relative;*/
/*white-space: nowrap;*/
}
#big-grid-games {
position: sticky;
top: 44px;
z-index: 9999;
}
.scroller {
overflow-x: scroll;
overflow-y: visible;
padding: 0;
margin-left: 155px;
}
.sticky-col {
left: 0;
position: absolute;
top: auto;
width: 155px;
}
#separators td {
color: #ffffff;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style4.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<table id="big-grid-games" cellpadding="1" cellspacing="1" border="1">
<tbody>
<tr>
<td class="sticky-col" width="155" align="center">Favorite</td>
<td width="155" align="center">UNC</td>
<td width="155" align="center">Michigan</td>
<td width="155" align="center">Kansas</td>
</tr>
<tr>
<td class="sticky-col" width="155" align="center">Point Spread</td>
<td width="155" align="center">12</td>
<td width="155" align="center">9.5</td>
<td width="155" align="center">11.5</td>
</tr>
<tr>
<td class="sticky-col" width="155" align="center">Underdog</td>
<td width="155" align="center">Baylor</td>
<td width="155" align="center">Texas</td>
<td width="155" align="center">Nevada</td>
</tr>
<tr id="separators">
<td class="sticky-col" width="155" align="center">_</td>
<td width="155" align="center">_</td>
<td width="155" align="center">_</td>
<td width="155" align="center">_</td>
</tr>
</tbody>
</table>
<div class="scroller">
<table id="big-grid-players" cellpadding="1" cellspacing="1" border="1">
<tbody>
<tr>
<td class="sticky-col" style="padding: 1px;" width="155" align="center">Chris</td>
<td width="155" align="center" class="">UNC</td>
<td width="155" align="center" class="">Texas</td>
<td width="155" align="center" class="">Nevada</td>
</tr>
<tr>
<td class="sticky-col" style="padding: 1px;" width="155" align="center">Dave</td>
<td width="155" align="center" class="">UNC</td>
<td width="155" align="center" class="">Michigan</td>
<td width="155" align="center" class="">Nevada</td>
</tr>
<tr>
<td class="sticky-col" style="padding: 1px;" width="155" align="center">John</td>
<td width="155" align="center" class="">Baylor</td>
<td width="155" align="center" class="">Texas</td>
<td width="155" align="center" class="">Nevada</td>
</tr>
<tr>
<td class="sticky-col" style="padding: 1px;" width="155" align="center">Steve</td>
<td width="155" align="center" class="">UNC</td>
<td width="155" align="center" class="">Michigan</td>
<td width="155" align="center" class="">Kansas</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>