-1

I am new to designing,can anyone please suggest me how to design a table with fixed row header at the top and should be able to see the data under relevant columns by scrolling with fixed header.Either using tables or divs please.

Kittu
  • 293
  • 1
  • 2
  • 9
  • possible duplicate of [jQuery/css/html: scrollable table with fixed header](http://stackoverflow.com/questions/3527104/jquery-css-html-scrollable-table-with-fixed-header) – Brandon Boone Feb 21 '13 at 13:02
  • check this out http://stackoverflow.com/questions/6534284/fixed-html-table-header-while-scrolling – Sean Mishra Feb 21 '13 at 13:04

1 Answers1

0

Is this DEMO what you need?

<div style="margin: 0; padding: 0; border-collapse: collapse; width: 519px; height: 100px; overflow: hidden; border: 1px solid black;">
    <table style="margin: 0; padding: 0; border-collapse: collapse; color: White; width: 517px; height: 20px; text-align: left; background-color: Blue;">
    <colgroup>
    <col width="200px"/>
    <col width="150px"/>
    <col width="150px"/>
    <col width="16px"/>
    </colgroup>
    <tbody>
    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
    <th style="margin: 0; padding: 0; border-collapse: collapse;">
    Column 1
    </th>
    <th style="margin: 0; padding: 0; border-collapse: collapse;">
    Column 2
    </th>
    <th style="margin: 0; padding: 0; border-collapse: collapse;">
    Column 3
    </th>
    <th style="margin: 0; padding: 0; border-collapse: collapse;">

    </th>
    </tr>
    </tbody>
    </table>
    <div style="margin: 0; padding: 0; border-collapse: collapse; width: 517px;  height:77px; overflow: auto;"
    >
    <table style="margin: 0; padding: 0; border-collapse: collapse; width: 500px;">
    <colgroup>
    <col width="200px"/>
    <col width="150px"/>
    <col width="150px"/>
    </colgroup>
    <tbody style="margin: 0; padding: 0; border-collapse: collapse;">
    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
    <td style="border: 1px solid lightgrey;">
    Row A-1
    </td>
    <td style="border: 1px solid lightgrey;">
    Row A-2
    </td>
    <td style="border: 1px solid lightgrey;">
    Row A-3
    </td>
    </tr>
    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
    <td style="border: 1px solid lightgrey;">
    Row B-1
    </td>
    <td style="border: 1px solid lightgrey;">
    Row B-2
    </td>
    <td style="border: 1px solid lightgrey;">
    Row B-3
    </td>
    </tr>
    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
    <td style="border: 1px solid lightgrey;">
    Row C-1
    </td>
    <td style="border: 1px solid lightgrey;">
    Row C-2
    </td>
    <td style="border: 1px solid lightgrey;">
    Row C-3
    </td>
    </tr>
    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
    <td style="border: 1px solid lightgrey;"
    >
    Row D-1
    </td>
    <td style="border: 1px solid lightgrey;">
    Row D-2
    </td>
    <td style="border: 1px solid lightgrey;">
    Row D-3
    </td>
    </tr>
    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
    <td style="border: 1px solid lightgrey;">
    Row E-1
    </td>
    <td style="border: 1px solid lightgrey;">
    Row E-2
    </td>
    <td style="border: 1px solid lightgrey;">
    Row E-3
    </td>
    </tr>
    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
    <td style="border: 1px solid lightgrey;">
    Row F-1
    </td>
    <td style="border: 1px solid lightgrey;">
    Row F-2
    </td>
    <td style="border: 1px solid lightgrey;">
    Row F-3
    </td>
    </tr>
    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
    <td style="border: 1px solid lightgrey;">
    Row G-1
    </td>
    <td style="border: 1px solid lightgrey;">
    Row G-2
    </td>
    <td style="border: 1px solid lightgrey;">
    Row G-3
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
coder
  • 13,002
  • 31
  • 112
  • 214
  • Dear @coder-Thanks again for your suggestion,Iwant to have the scroll bars on bottom as well as right side of page,right now it is giving only on right side.Can u suggest me how can I do that – Kittu Feb 21 '13 at 14:54
  • Thanks for that,But I need to bind the headercolumn with the data columns while scrolling left to right or viceversa.Any idea... – Kittu Feb 21 '13 at 16:18