我正在尝试使用gavroche's solution合并可滚动的<tbody>
。到目前为止,这就是我所拥有的:
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>
输出:
如何使标题行在整个表格中延伸?
答案 0 :(得分:3)
看起来存在阻止JS执行的问题。我把你的代码放到一个小提琴中然后就可以了。如果我删除JS,我会得到相同的结果:
$(document).ready( function(){
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);
}
});
.scroll table {
margin: 0 auto;
border-collapse: separate;
}
.scroll thead {
display: block;
}
.scroll tbody {
height: 30em;
overflow-y: scroll;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="viewfaculty" class="scroll">
<thead>
<tr align="center">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</tbody>
</table>
答案 1 :(得分:0)
我明白了。预制/开源模板中的CSS弄乱了默认情况下表格的显示方式。我删除了所有与表有关的CSS。
我还选择了does not use JavaScript。
的解决方案