CODEWITHSUNDEEP
htmlscrollhtml-tablescrollbar
Ronnie
Ronnie

Reputation: 23

How to add a scroll bar in the body of the table?

This is my code:

I need to add a scroll bar in the body of the table, the header must remain constant. The body cells are not properly fixing if I add a scroll bar.

I need to add a scroll bar in the body of the table, the header must remain constant. The body cells are not properly fixing if I add a scroll bar.

<table width="600" border="1" style="border-collapse:collapse; border: 1px solid #AEAEAE;" cellpadding="0" cellspacing="0">
<tr>
    <th rowspan="2">
        Title
    </th>
    <th rowspan="2">
        Title
    </th>
    <th colspan="4">
        Title
    </th>
    <th colspan="2">
        Title
    </th>


</tr>
<tr>
    <th>
        Title
    </th>
    <th>
       Title
    </th>
    <th>
        Title
    </th>
    <th>
        Title
    </th>
    <th>
        Title
    </th>
    <th>
        Title
    </th>

</tr>

        <td height="400">
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
    </tr>

Upvotes: 0

Views: 20020

Answers (2)

Noah Heldman
Noah Heldman

Reputation: 6874

None of the other solutions I've found met all my requirements, so I created a very lightweight jQuery plugin to do this. It supports fixed header, footer, column spanning (colspan), resizing, and an optional number of rows to display before scrolling starts.

jQuery.scrollTableBody (GitHub)

As long as you have a table with proper <thead>, <tbody>, and (optional) <tfoot>, all you need to do is this:

$('table').scrollTableBody();

Upvotes: 1

Itay
Itay

Reputation: 16777

Just give the table's tbody element a height and a scrolling overflow. Like this:

.tableClass tbody
{
     height: 300px; /* Random number I chose */
     overflow: scroll /* you can be more specific and use overflow-y */
}

Edit: I saw your code and your not using <tbody> and <thead>. Read about them. The general idea is to wrap the table's content with one element, and to wrap the table's headings with one element.

Here's a working example: http://www.imaputz.com/cssStuff/bigFourVersion.html

Upvotes: 3

Related Questions