I am trying to incorporate a scrollable <tbody> using gavroche's solution. So far, this is what I have:
JS:
var tblcols = 7; // table columns
var tblClass = ".scroll"; // 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:
How do I make the header row stretch across the whole table?
