0

I wanted a html page which has a html header and a table header to have non scrollable feature. Only the table contents should be scrollable.

For ex:

<html>
    <body>
        <h1>header</h1>
        <h1>header2</h1>
        <table>
            <thead>
                <tr>
                    <th>name</th>
                </tr>
                <tr>
                    <th>address</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>Venkat</td>
                </tr>
                <tr>
                    <td>bangalore</td>
                </tr>
                //this part will be repeating
            </tbody>
        </table>
    </body>
</html>

I want only the contents in the table body to be scrollable.

I had referred the following link also How do you create non scrolling div at the top of an HTML page without two sets of scroll bars

But i cannot use the div to only contain headers and table header..

I have created a fiddle with a situation similar to mine. Please have a look http://jsfiddle.net/VenkateshManohar/bU7NN/

Community
  • 1
  • 1
Venkatesh Manohar
  • 2,125
  • 1
  • 18
  • 19
  • Possible duplicate of [How to make Scrollable Table with fixed headers using CSS!](http://stackoverflow.com/questions/17584702/how-to-add-a-scrollbar-to-an-html5-table) – Dhaval Marthak Apr 03 '14 at 10:04

2 Answers2

0

You will can find a jQuery plugin here that will do it for you ;)

Quentin Gaillard
  • 1
  • 1
0

You can try like this: LINK

HTML Code:

<div class="dataGridHeader">
  <div class="dataGridContent">
    <table cellpadding="0" cellspacing="0" class="scrolltablestyle style-even">
      <thead>
        <tr>
          <th width="160">Shopper Name</th>
          <th width="160">First Name</th>
          <th width="160">Last Name</th>
          <th width="160">User ID</th>
          <th width="160">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width="160">C2C Fishing</td>
          <td width="160">John</td>
          <td width="160">Doe</td>
          <td width="160">C2C Fishing</td>
          <td width="160">Enabled</td>
        </tr>

.
.
.
.
      </tbody>
    </table>
  </div>
</div>

Hope this helps

G.L.P
  • 7,119
  • 5
  • 25
  • 41
  • Tried this... The functionality is working fine.But in my table i have columns which are hidden and can be displayed dynamically using multiselect bootstrap. Hence the width of the table header columns and rows are not matching...Do you have any suggestions for that. – Venkatesh Manohar Apr 03 '14 at 10:33
  • Even using this fiddle solution is not working in my case. As there are some columns which are hidden by multiselect and those can be made visible dynamically.apart from that when i use this solution the header and column will not have same width.. Thanks for your time and suggestion.. – Venkatesh Manohar Apr 03 '14 at 12:00
  • I have created a fiddle for the same please have a look http://jsfiddle.net/VenkateshManohar/bU7NN/ – Venkatesh Manohar Apr 04 '14 at 13:30