I'm currently working on implementing a scrollable <tbody> in my project, following the solution provided by gavroche. Here's what I have so far:
JS:
var tblcols = 7; // defining table columns
var tblClass = ".scroll"; // referencing table class
for(var i = 0; i < tblcols; i++) {
var thWidth = $(tblClass).find("th:eq(" + i + ")").width();
var tdWidth = $(tblClass).find("td:eq(" + i + ")").width();
if(thWidth < tdWidth)
$(tblClass).find("th:eq(" + i + ")").width(tdWidth);
else
$(tblClass).find("td:eq(" + i + ")").width(thWidth);
}
CSS:
.scroll table {
margin: 0 auto;
border-collapse: separate;
}
.scroll thead {
display: block;
}
.scroll tbody {
height: 30em;
overflow-y: scroll;
display: block;
}
HTML:
<table id="viewfaculty" class="scroll">
<thead align="center">
<tr>
<th><a href="viewfaculty?orderBy=professor_id">ID</a></th>
<th><a href="viewfaculty?orderBy=professor_last_name">L. Name</a></th>
<th>F. Name</th>
<th>Sex</th>
<th>Email</th>
<th><a href="viewfaculty?orderBy=professor_employment_status">Empl. Status</a></th>
<th><a href="viewfaculty?orderBy=professor_department">Dept.</a></th>
</tr>
</thead>
<tbody>
<s:if test="#session.facultyList.isEmpty()">
<tr align="center">
<td colspan="7"><p class="norecords">NO RECORDS FOUND</p></td>
</tr>
</s:if>
<c:forEach var="professor" items="${facultyList}">
<tr>
<td align="center">${professor.profId}</td>
<td>${professor.profLastName}</td>
<td>${professor.profFirstName}</td>
<td align="center">${professor.profSex}</td>
<td>${professor.profEmail}</td>
<td align="center">${professor.profEmplStatus}</td>
<td align="center">${professor.profDept}</td>
</tr>
</c:forEach>
</tbody>
</table>
Output:
Any tips on how to make the header row extend across the entire table?