Fixing Table column names when table scrolls

Question

I'm creating a table on to display on a JSP page in Struts2. I want to the be able to scroll the table but keep the column headings fixed at the top. So far all I can achieve is when I scroll the table the headings also scroll.

Here is my table code.

<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>

any help would be appreciated.

possible duplicate of [Table header to stay fixed at the top when user scrolls it out of view with jQuery](http://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque) — Shaggy, Apr 25 '15 at 17:00

score 1 · Answer 1 · answered Apr 25 '15 at 11:59

Because you are writing rows to the head of the table instead of the body. Try

<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>

score 1 · Answer 2 · edited May 23 '17 at 12:04

If you are using Bootstrap, please tag the question as Bootstrap;
If you are using Bootstrap, be aware of the existence of the struts2-bootstrap-plugin;
table-stripec should be table-striped;
In an HTML <table>, <thead> must contain only the headers, the rest goes into <tbody>;
<p></p> (as every other HTML tag) is illegal between one <tr> and another;
Use the proper Bootstrap classes on your table objects.

That said, there are numerous solutions to this problem, both with plugins / external libraries, or with custom code, like this one.

The following is pretty straight, and the CSS code is minimal, but it changes the table behavior a bit, so take a look if it can fit your needs:

.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;
}

<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>

Note: table-striped class won't natively work with this one; just add your odd/even classes to the <tr> inside the <s:iterator> by yourself

Fixing Table column names when table scrolls

2 Answers2