Table scrollbar without changing headers and provide sorting in headers

Question

Hello All,

Here is mytable and need the headers to remain while there is a scrollbar only to the results and provide the sorting facility in the name.

<table>
    <tr>
        <td>id</td>
        <td>name</td>
        <td>type</td>
    </tr>
<%
    while(resultSet.next())
    {
        %>
        <tr>
        <td><%=resultSet.getString(1)%></td>
        <td><%=resultSet.getString(2)%></td>
        <td><%=resultSet.getString(3)%></td>
    </tr>
<%
    }
%>
</table>

for the scrollbar, i tried to use div but, it showed blank space.

How can I do these two things?

Answer 1

Try:

<table height="500" style="overflow-y:scroll;">

Answer 2

Put the header in a <thead> and the rest in a <tbody> and apply the scrollbar to the tbody only.

Answer 3

There are lots of script that already do this on the web :

• http://www.devwebpro.com/16-sortable-table-techniques/
• http://tetlaw.id.au/upload/pages/table-sorting-with-prototype/
• http://www.webdesignbooth.com/15-great-jquery-plugins-for-better-table-manipulation/

There are certainly a lot more, that may work very well.