Question

我正在尝试使用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>

输出： scroll

如何使标题行在整个表格中延伸？

Answer 1

看起来存在阻止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>

Answer 2

我明白了。预制/开源模板中的CSS弄乱了默认情况下表格的显示方式。我删除了所有与表有关的CSS。

我还选择了does not use JavaScript。

的解决方案

没有伸展到100％

2 个答案: