0

I'm trying to make fixed table fields in scrollable div.

HTML part:

<div class="scroll">
    <table>
        <thead>
            <tr>
                <td>Title #1</td>
                <td class="second">Title #2</td>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Name #1</td>
                <td>Description</td>
            </tr>
            <tr>
                <td>Name #2</td>
                <td>Description</td>
            </tr>
        </tbody>
    </table>
</div>

CSS part:

table {

    width: auto;
}

table > thead > tr > td {

    min-width: 100px;
    max-width: 100px;

    padding: 10px 20px;
    border-right: 1px solid #666666;
    background-color: #cccccc;
}

table > thead > tr > td.second {

    min-width: 300px;
    max-width: 300px;
}

table > tbody > tr > td {

    padding: 30px 0;
}

div.scroll {

    max-width: 400px;
    max-height: 200px;
    overflow: auto;
}

Where div.scroll have max-height and max-width set to lower sizes than table. Please see fiddle example.

Live example: example

Red part should stay at top when scrolling vertically, but should move when scrolling horizontally, and blue part should move when scrolling vertically, but should stay at left when scrolling horizontally.

Question:

Is there any easy way of doing this? Or what is best way of doing this..?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Vaidas
  • 968
  • 9
  • 22
  • 1
    try this : http://fixedheadertable.com/ – G.L.P Jun 27 '14 at 12:20
  • Check the below. http://stackoverflow.com/questions/1100835/scrollable-html-table-with-top-row-and-left-column-frozen http://stackoverflow.com/questions/684211/html-table-with-fixed-headers-and-a-fixed-column http://stackoverflow.com/questions/12114417/fixed-left-column-and-header-in-html-table – Nitesh Jun 27 '14 at 12:20

2 Answers2

0

http://jsfiddle.net/hmvxf/1/ please check this update of your code

Made a few changes 

<div class="fixed">
     <table>
        <thead>
            <tr>
                <td>
                    Title #1
                </td>
                <td class="second">
                    Title #2
                </td>
            </tr>
        </thead>
    </table>
</div>
Sankalp Srivastava
  • 392
  • 1
  • 12
0

jQuery solution for my problem: STICKY TABLE HEADERS & COLUMNS.

Vaidas
  • 968
  • 9
  • 22