Question

我正在创建一个表格，以便在Struts2中的JSP页面上显示。我希望能够滚动表格，但保持列标题固定在顶部。到目前为止，我所能实现的是当我滚动表格时标题也会滚动。

这是我的表格代码。

<div style="height: 150px; overflow: auto;">
        <p id="contact"></p>
        <table class="table table-stripec" id="contact" border="data-height=100" align = "center"  >
            <thead>
                <tr>
                    <th>Ticket Id</th>
                    <th>Creation Date</th>
                    <th>Client Name</th>
                    <th>Department.</th>
                    <th>Summary.</th>
                    <th>Assigned to.</th>
                    <th>status.</th>
                    <th>Update.</th>
                    <th>Category.</th>
                </tr>
                <p></p>

                <s:iterator value="ticketList">
                    <tr>
                        <td><s:property value="ticket_id" /></td>
                        <td><s:property value="date1" /></td>
                        <td><s:property value="name" /></td>
                        <td><s:property value="department" /></td>
                        <td><s:property value="issueType" /></td>                       
                        <td><s:property value="assigneName" /></td>
                        <td><s:property value="status" /></td>
                        <td><s:property value="statusupdate" /></td>
                        <td><s:property value="category" /></td>
                    </tr>
                </s:iterator>



            </thead>
        </table>
    </div>

任何帮助将不胜感激。

Answer 1

因为您正在将行写入表头而不是正文。尝试

<table class="table table-stripec" id="contact" border="data-height=100" align = "center"  >
    <thead>
        <tr>
            <th>Ticket Id</th>
            <th>Creation Date</th>
            <th>Client Name</th>
            <th>Department.</th>
            <th>Summary.</th>
            <th>Assigned to.</th>
            <th>status.</th>
            <th>Update.</th>
            <th>Category.</th>
        </tr>
    </thead>
    <tbody>
        <s:iterator value="ticketList">
            <tr>
                <td><s:property value="ticket_id" /></td>
                <td><s:property value="date1" /></td>
                <td><s:property value="name" /></td>
                <td><s:property value="department" /></td>
                <td><s:property value="issueType" /></td>                       
                <td><s:property value="assigneName" /></td>
                <td><s:property value="status" /></td>
                <td><s:property value="statusupdate" /></td>
                <td><s:property value="category" /></td>
            </tr>
        </s:iterator>
    </tbody>
</table>

Answer 2

如果您使用的是Bootstrap，请将问题标记为Bootstrap;
如果您使用的是Bootstrap，请注意struts2-bootstrap-plugin;
table-stripec应为table-striped;
在HTML <table>中，<thead>必须只包含标题，其余的都会包含<tbody>;
<p></p>（与其他所有HTML标记一样）在<tr>和另一个.table-fixed thead { width: 97%; } .table-fixed tbody { height: 140px; overflow-y: auto; width: 100%; } .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th { display: block; } .table-fixed tbody td, .table-fixed thead > tr> th { float: left !important; /* !important added only to fix StackOverflow's Snippet behavior. Not needed otherwise. */ border-bottom-width: 0; }之间是非法的;
在表格对象上使用正确的Bootstrap类。

也就是说，这个问题有很多解决方案，包括插件/外部库或自定义代码，如this one。

以下内容非常简单，CSS代码很少，但它会稍微改变表的行为，所以看看它是否符合您的需求：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-fixed">
    <thead>
        <tr>
            <th class="col-xs-3">Ticket Id</th>
            <th class="col-xs-6">Creation Date</th>
            <th class="col-xs-3">Client Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-xs-3">1</td>
            <td class="col-xs-6">1 gen 2015</td>
            <td class="col-xs-3">Foo</td>
        </tr>
        <tr>
            <td class="col-xs-3">2</td>
            <td class="col-xs-6">2 gen 2015</td>
            <td class="col-xs-3">Bar</td>
        </tr>
        <tr>
            <td class="col-xs-3">3</td>
            <td class="col-xs-6">3 gen 2015</td>
            <td class="col-xs-3">FooBar</td>
        </tr>
        <tr>
            <td class="col-xs-3">4</td>
            <td class="col-xs-6">4 gen 2015</td>
            <td class="col-xs-3">BarFoo</td>
        </tr>
        <tr>
            <td class="col-xs-3">5</td>
            <td class="col-xs-6">5 gen 2015</td>
            <td class="col-xs-3">Foo</td>
        </tr>
        <tr>
            <td class="col-xs-3">6</td>
            <td class="col-xs-6">6 gen 2015</td>
            <td class="col-xs-3">Bar</td>
        </tr>
        <tr>
            <td class="col-xs-3">7</td>
            <td class="col-xs-6">7 gen 2015</td>
            <td class="col-xs-3">FooBar</td>
        </tr>
        <tr>
            <td class="col-xs-3">8</td>
            <td class="col-xs-6">8 gen 2015</td>
            <td class="col-xs-3">BarFoo</td>
        </tr>
        <tr>
            <td class="col-xs-3">9</td>
            <td class="col-xs-6">9 gen 2015</td>
            <td class="col-xs-3">Foo</td>
        </tr>
        <tr>
            <td class="col-xs-3">10</td>
            <td class="col-xs-6">10 gen 2015</td>
            <td class="col-xs-3">Bar</td>
        </tr>
        <tr>
            <td class="col-xs-3">11</td>
            <td class="col-xs-6">11 gen 2015</td>
            <td class="col-xs-3">FooBar</td>
        </tr>
        <tr>
            <td class="col-xs-3">12</td>
            <td class="col-xs-6">12 gen 2015</td>
            <td class="col-xs-3">BarFoo</td>
        </tr>
    </tbody>
</table>

table-striped

注意：<tr>类本身不适用于此类;只需将您的奇/偶类添加到<s:iterator>内的SELECT authors.name, COUNT(*) AS count FROM authors LEFT JOIN threads USING (author_id) GROUP BY author_id

在表滚动

2 个答案: