0

What i'm trying to achieve here is to lock the HEADER and FIRST COLUMN so I can see what day it is and which name i'm under at all times while scrolling up/down or left/right.

I have tried some jquery plugins that make this happen but when the table cells are excessive, it tends to timeout on IE...so i would rather do this with PURE CSS..

Anyone have some valid input on this?

JSFIDDLE: http://jsfiddle.net/dd5ysjus/15/

i would paste code here but its too much...

here is my css:

div.horizscroll {
    overflow: scroll;
    width: 600px;
    height: 150px;
}

.header {
background: #D7DF01;
}
rubberchicken
  • 1,270
  • 2
  • 21
  • 47
  • 1
    See if [this](http://jsfiddle.net/rCuPf/7/embedded/result/) is any help. It's from [here](http://stackoverflow.com/questions/10838700/large-dynamically-sized-html-table-with-a-fixed-scroll-row-and-fixed-scroll-colu/10922732#10922732). – Narong Sep 18 '14 at 19:47
  • 1
    @rubberchicken this is as far as I got.... I managed to create the horizontal layout correctly but I gave up on the vertical layout. I tried applying the same method but I think I'm getting a brain freeze. But you could work from this [example](http://jsfiddle.net/YMvk9/5062/). – Arty Sep 23 '14 at 08:05
  • p.s. jfiddle acts a bit funny with this when you scroll horizontally using the mouse's middle button. It's better to try it in a proper html file. – Arty Sep 23 '14 at 08:08
  • Are you trying to achieve something similar to a (Sticky Navbar)[http://foundation.zurb.com/docs/components/topbar.html#] as shown on Foundation? – Wold Sep 24 '14 at 04:52
  • @Narong - Thanks for your support and trying to help me with this... I gave up trying to do it without a jquery plugin.. I'm using datatables now and it seems to be ok so far... next will be getting node.js or something similar for real time updates to the tables... i want to give this bounty to both of you .. is that possible ? – rubberchicken Sep 26 '14 at 03:34
  • @Arty - Thanks for your support and trying to help me with this... I gave up trying to do it without a jquery plugin.. I'm using datatables now and it seems to be ok so far... next will be getting node.js or something similar for real time updates to the tables... i want to give this bounty to both of you .. is that possible ? – rubberchicken Sep 26 '14 at 03:35

3 Answers3

-1

its hard to find things in it but anyway

add class fix which you want to fixed

.fix{ position:fixed; background:#fff;}

and 

div.horizscroll {
    overflow-x: scroll;
position:relative;
    width: 600px;
}

hope it will help

himanshu
  • 1,732
  • 1
  • 11
  • 12
-1

Try this

<html>
    <style>
        table{border-collapse:collapse;}
        table th{width:100px;}
        .container{overflow:scroll;border:solid 1px red;width:700px;height:300px;}
        .inner-table{position:relative;float:left;}
        .inner-table tr td{padding:53px;background:#ccc;}

    </style>
    <body>
        <table border=1>
            <th></th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>

            <tr>
                <td class="first-td">First Column</td>
                <td colspan="6" rowspan="4" style="padding:0;width:200px">
                    <div class="container">
                    <table border=1 class="inner-table">
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                    </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="first-td">First Column</td>
            </tr>
            <tr>
                <td class="first-td">First Column</td>
            </tr>
            <tr>
                <td style="height:16px;"></td>
            </tr>
        </table>
    </body>
</html>

It Works! But you must set the row height inside the container row according to your data needs.

Hendry Tanaka
  • 454
  • 3
  • 11
  • This solution doesn't solve @rubberchicken's problem. Your headers don't follow the content when you scroll down or to the sides. – M - Sep 25 '14 at 18:04
-2

You can also achieve this by changing html structure, please check your updated fiddle - http://jsfiddle.net/dd5ysjus/12/

<table class="table-intro">
..//here goes titles
</table>
<div class="horizscroll">
...//here all data you have
</div>
shershen
  • 9,875
  • 11
  • 39
  • 60