Fixing Table column names when table scrolls - css

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.

Answer 1

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>

Answer 2

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