Scrollable table in JSP

Question

I m facing the problem creating the scrollable table(with fixed head) in side the JSP. Please Help. Let me know if you need anything

<div class = "scrollable">
 <table class = "table table-condensed table-hover">
    <thead>
    <tr class= "info">
        <th>Prod id</th>
        <th>Name </th>
        <th>Manufacturer</th>
        <th>Quantity</th>
        <th>Purchased Price</th>
        <th>Selling Price</th>
        <th>Weight/Packet</th>
        <th>Type</th>
        <th>Category</th>
     </tr>
     </thead>
     <tbody >
    <%  while(rs.next()){ %>

    <tr class = "default">

    <td><%= rs.getString(1) %></td>
    <td><%= rs.getString(2) %> </td>
    <td><%= rs.getString(3) %></td> 
    <td><%= rs.getString(4) %></td>
    <td><%= rs.getString(5) %> </td>
    <td><%= rs.getString(6) %> </td>
    <td><%= rs.getString(7) %> </td>
    <td><%= rs.getString(8) %> </td>
    <td><%= rs.getString(9) %> </td>

    </tr>
    </tbody>
    <% } %>
    </table>
 </div>

Where "rs" is the resultset

Possible duplicate of [Table - fixed header, scrollable body, most robust/simple solution?](http://stackoverflow.com/questions/1301049/table-fixed-header-scrollable-body-most-robust-simple-solution) — Porkko M, Mar 19 '17 at 13:52
@PorkkoM It is not duplicate question.. Have tried with those solution provided but didnt worked :( — Shivu Mali, Mar 19 '17 at 14:00
@efekctive-- Yes , I tried but not getting the solution .. Help me if you know the soln — Shivu Mali, Mar 19 '17 at 14:01

SANTOSHKUMAR SINGH · Accepted Answer · 2017-03-19T14:19:48.747

Try this, it will work.

// Change the selector if needed
var $table = $('table.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();
    
    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
}).resize(); // Trigger resize handler

table.scroll {
    width: 100%; /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
    height: 30px;
    line-height: 30px;
    /*text-align: left;*/
}

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
    width: 20%; /* Optional */
    border-right: 1px solid black;
}

tbody td:last-child, thead th:last-child {
    border-right: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table class="scroll">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
    </tbody>
</table>

@satoshkumar. Thanks lot for your ans. I did it in the different way than yours.. btw I tried your solution also.. It is also working fine — Shivu Mali, Mar 19 '17 at 14:21

Scrollable table in JSP

1 Answers1