After searching a lot, I came across this plugin: Fixed Header Tables. I guess I followed the instructions as given in the main website, but I was not able to make it working.
Well, I wanted to make a normal table function like fixed top row and left column. So I thought of using this plugin. But ultimately, it creates a shadow div, but doesn't seem to scroll, or fix to the defined size.
I also don't know where to send the sizes. Here is what I have till now:
If you see the snippet, it is not enclosing into the 150 px x 235 px
dimensions. Where am I going wrong.
You are missing the defaultTheme.css
file (or any theme file)
$(document).ready(function () {
$("table").fixedHeaderTable({ footer: true, cloneHeadToFoot: true, fixedColumn: true, height: 300 });
});
* {font-family: Segoe UI;}
body {font-size: 80%;}
table {}
th {text-align: left;}
<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>
<link rel="stylesheet" href="http://www.fixedheadertable.com/css/defaultTheme.css" media="screen" />
<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>2</th>
<td>Bhalmung</td>
<td>Language Learning</td>
<td>21</td>
</tr>
<tr>
<th>3</th>
<td>Vicky</td>
<td>Computer Engineering</td>
<td>21</td>
</tr>
<tr>
<th>4</th>
<td>Alice</td>
<td>Computer Science</td>
<td>41</td>
</tr>
<tr>
<th>5</th>
<td>Carol</td>
<td>Counselling</td>
<td>83</td>
</tr>
<tr>
<th>6</th>
<td>Chuck</td>
<td>Criminal Justice</td>
<td>82</td>
</tr>
<tr>
<th>7</th>
<td>Craig</td>
<td>Cultural Studies</td>
<td>93</td>
</tr>
<tr>
<th>8</th>
<td>Dan</td>
<td>Ecology</td>
<td>63</td>
</tr>
<tr>
<th>9</th>
<td>Erin</td>
<td>Economics</td>
<td>26</td>
</tr>
<tr>
<th>10</th>
<td>Eve</td>
<td>Education</td>
<td>22</td>
</tr>
<tr>
<th>11</th>
<td>Faythe</td>
<td>Engineering</td>
<td>52</td>
</tr>
<tr>
<th>12</th>
<td>Frank</td>
<td>Engineering Geology</td>
<td>93</td>
</tr>
<tr>
<th>13</th>
<td>Mallet</td>
<td>Engineering Management</td>
<td>16</td>
</tr>
<tr>
<th>14</th>
<td>Oscar</td>
<td>Engineering Mathematics</td>
<td>57</td>
</tr>
<tr>
<th>15</th>
<td>Peggy</td>
<td>English</td>
<td>5</td>
</tr>
<tr>
<th>16</th>
<td>Sam</td>
<td>English Language</td>
<td>27</td>
</tr>
<tr>
<th>17</th>
<td>Sybil</td>
<td>Environmental Science</td>
<td>61</td>
</tr>
<tr>
<th>18</th>
<td>Trent</td>
<td>Ethics</td>
<td>66</td>
</tr>
<tr>
<th>19</th>
<td>Walter</td>
<td>European and European Union Studies</td>
<td>82</td>
</tr>
<tr>
<th>20</th>
<td>Wendy</td>
<td>European Union Studies</td>
<td>79</td>
</tr>
</tbody>
</table>