After doing extensive research, I stumbled upon this plugin called Fixed Header Tables. Despite following the instructions provided on the main website, I couldn't get it to work.
I was aiming to create a table with a fixed top row and left column functionality. This led me to consider using the Fixed Header Tables plugin. However, it only seems to generate a shadow div without actually scrolling or adhering to the defined size.
I'm also unsure of where to input the sizes effectively. Here's what I currently have:
$(document).ready(function () {
$("table").fixedHeaderTable({ footer: true, cloneHeadToFoot: true, fixedColumn: true });
});* {font-family: Segoe UI;}
body {font-size: 80%;}
table {width: 150px; height: 235px;}
th {text-align: left;}
.fht-table-wrapper {height: 35px;}<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fixed-header-table/1.3.0/jquery.fixedheadertable.min.js"></script>
<table>
<thead>
<tr>
<th>Sl No</th>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Praveen</td>
<td>Communication Disorders</td>
<td>23</td>
</tr>
...
<tr>
<th>20</th>
<td>Wendy</td>
<td>European Union Studies</td>
<td>79</td>
</tr>
</tbody>
</table>Upon inspecting the snippet, I noticed that it wasn't conforming to the dimensions of 150 px x 235 px. Any ideas on where I might be making an error?