0

I want a table with first(and even sometimes second) column (including all the rows so both th and td) to be fixed. Also the last column of the table should be fixed.

The columns in between should (if there are too many columns to fit the screen) be scrollable horizontally. I am having big troubling achieving this.

I can't get the center area to actually scroll unless I set a fixed with or remove the fixed last column but I really need that. Html:

<div class="table-wrapper">
    <div class="container">
    <table>
        <thead>
            <tr>
                <th></th>
                <th>Jan</th>
                <th>Feb</th>
                <th>Mar</th>
                <th>Apr</th>
                <th>May</th>
                <th>Jun</th>
                <th>Jul</th>
                <th>Aug</th>
                <th>Sep</th>
                <th>Oct</th>
                <th>Nov</th>
                <th>Dec</th>
                <th>Result</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Assets</td>
                <td>358 125</td>
                <td>716 250</td>
                <td>1 074 375</td>
                <td>358 125</td>
                <td>716 250</td>
                <td>1 074 375</td>
                <td>358 125</td>
                <td>716 250</td>
                <td>1 074 375</td>
                <td>358 125</td>
                <td>716 250</td>
                <td>1 074 375</td>
                <td>8 595 000</td>
            </tr>
            <tr>
                <td>Some type of assets</td>
                <td>179 535</td>
                <td>359 070</td>
                <td>538 605</td>
                <td>179 535</td>
                <td>359 070</td>
                <td>538 605</td>
                <td>179 535</td>
                <td>359 070</td>
                <td>538 605</td>
                <td>179 535</td>
                <td>359 070</td>
                <td>538 605</td>
                <td>4 308 840</td>
            </tr>
            <tr>
                <td>Some other type of assets</td>
                <td>134 780</td>
                <td>269 560</td>
                <td>404 340</td>
                <td>134 780</td>
                <td>269 560</td>
                <td>404 340</td>
                <td>134 780</td>
                <td>269 560</td>
                <td>404 340</td>
                <td>134 780</td>
                <td>269 560</td>
                <td>404 340</td>
                <td>3 234 720</td>
            </tr>
            <tr>
                <td>45456 Cars</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>1 078 680</td>
            </tr>
            <tr>
                <td>879878 computers</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>1 078 680</td>
            </tr>
        </tbody>
    </table>
</div></div>

And css:

* {
    box-sizing: border-box;
}
.table-wrapper { 
    position:relative;   
    float: left;
    margin-right: 200px;
}

.container {
    overflow-x:scroll;
    overflow-y:visible;
    margin-left: 200px;
}

td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child, td:first-child {
    position: absolute;
    left: 5px;
        width: 200px;
}
th:last-child, td:last-child {
    position: absolute;
    right: -200px;
        width: 200px;
}

JsFiddle can be found here

Update: To further explain what I need. The middle part can not be set to fixed with. I want to use as much space of the page as possible. This means if there are only a few columns on a big screen no scrolling would be necessary.

Todilo
  • 1,256
  • 3
  • 19
  • 38
  • 1
    This might help you: http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body – ctwheels Jun 24 '14 at 15:30
  • Perhaps you might find the [jQuery Simple Scroll Edge](http://ddenhartog.github.io/jquery-simple-scroll-edge/) plugin I built to be of use. You could construct the columns/rows you want fixed outside the scroll edge! – Douglas Denhartog Jun 24 '14 at 18:20
  • @ctwheels that question is what got me this far :) . – Todilo Jun 25 '14 at 06:45

1 Answers1

1

http://jsfiddle.net/Usk3h/1/

3 parts 2 fixed parts at front and back and middle portion using your scroll code.

.table-wrapper { 
    overflow-x:scroll;
    width:600px;
    float:left;
    display:inline-block;
}

table.header { float:left; width:300px; }
table.body { width:1600px; }
td, th {
    padding: 5px 20px;
}

Complete solution

http://jsfiddle.net/Usk3h/3/

vico
  • 2,152
  • 2
  • 17
  • 38
  • The jsfiddle does not seem to work for me. No backpart – Todilo Jun 24 '14 at 17:41
  • @Todilo See edits (new fiddle)... sometimes you should work out the last part of the code so you understands – vico Jun 24 '14 at 18:09
  • @viso sorry I naively presumed you send the wrong link or something. Thank you for the solution. I still have many features to go so I really need to learn how the code works. I need it to preferably be 100% width for instance. Might not even be possible. – Todilo Jun 25 '14 at 06:44
  • the middle part here is fixed and well that does not utilize the width of the screen in any good way. Is there a way that the overflow part use as much of the width as possible without pushing down the table.footer. – Todilo Jun 25 '14 at 08:43