How do I freeze the first and last columns of an html table in a scrollable div?

Can I propose a somewhat unorthodox solution?

What would you think about placing the 'total' column after the 'name' column, rather than at the very end? Wouldn't this avoid the requirement for only a portion of the table to scroll?

It's not exactly what you're asking for, but perhaps it is a sufficient solution, given that the alternative would be pretty messy. (Placing the 'total' and 'name' columns outside of the table, for instance, would create alignment problems when not all rows are of equal height. You could correct this with javascript but then you'd be entering a whole new world of pain).

Also from a UI perspective, it may be that 'name' and 'total' are the most important data, in which case it would make sense to put them together, followed by a sort of 'breakdown' of the total. Of course, we seem to have an intuition that a 'total' should come after its constituent parts, but I don't think it would cause too much confusion to the user if the order were reversed like this (though this is a question for you, based on your product and your users).

Anyway, something to consider.

EDIT:

Here are some more unorthodox solutions, now that I think I understand your intentions a bit better:

1. Paginate the scores. Give the most recent ten, say, and the total, and a link to older scores, which are provided 10 at a time
2. Only give names, totals, and some other meaningful measures such as mean and sd, then provide a link for each name that shows all results corresponding to that name. You could then also provide a link showing all results for a given score set, so that comparisons between different users can be made. The point is that you'd only have to give 1 dimension of data for each view, rather than having an unwieldy 2D data set
3. Make the rows sortable (easy with jQuery UI) so that if I want to compare Mary to Jane, I can drag and place one after the other, so I wont need to keep scrolling left and right to see which scores correspond to which names
4. Highlight a row when it is clicked, by changing the background color or similar, again so I don't need to keep scrolling left and right.

Anyway you get the idea. Perhaps it is better to look for a UI solution than a contorted markup solution. Ultimately I would be questioning how important it is to present so much data to the user at once, that a portion of it needs to scroll in a particular fashion for the data to be readable. Perhaps you're building a spreadsheet app, and you really do need to display a 100x100 matrix in a single view. If not, you could surely come up with more creative ways than I have to split up the results.

It's not complete right now (I just mocked it up really quick), but here's a way of doing it using straight HTML. You want three tables ... two outside the <div> and one inside the <div>. All three are floated to the left, so that they're all on the same line.

Table Test

and the code itself:

 <table style="float: left;"> <tr> <td>Name</td> </tr> <tr> <td>John</td> </tr> <tr> <td>Will</td> </tr> </table> <div id="tableWrapper" style="overflow-x: auto; width: 500px;float:left;padding-bottom: 10px;"> <table> <tr> <td>Score1</td> <td>Score2</td> ... </tr> <tr> <td>5</td> <td>6</td> ... </tr> <tr> <td>3</td> <td>7</td> ... </tr> <tr> <td>7</td> <td>1</td> ... </tr> </table> </div> <table style="float: left;"> <tr> <td>Total</td> </tr> <tr> <td>86</td> </tr> <tr> <td>82</td> </tr> </table> 

Note: The padding-bottom on the div is so that the scrollbar does not cover up the table in IE. Also, the bug I have to work out is how to specify the width of the header elements inside the middle table. For some reason, specifying the width="" attribute does not work. Thus, if the text of the header element is too wide (and breaks onto another line), then the layout is broken (off by one row)

I assume you want to scroll it horizontally only. Otherwise it could be confusing with static columns.

You could put the overflow: auto onto a containing element of the inner table cells only... I'm not sure how browsers would handle this, but you may be able to put the elements you want fixed inside thead and tfoot elements, and put the scrolling portion inside a tbody element, and set it's overflow to auto.

Failing that, you may need to drop semantics and code the left column and right column outside the table.

Personally, I'd try code it as semantic as possible, and then use JavaScript to position the left and right columns. Without JavaScript, you should make it fail gracefully to just a wide table (not sure how difficult this would be, as you say you have a fixed width)

You could try this (rough) jQuery example to put the first column's values outside.

var nameTable = '<table id="outside-name-col"> <thead> <tr> <th>Name</th> </tr> </thead> <tbody>'; // start making a table for name column only $('#scoreTable tbody tr').each(function() { // iterate through existing table var nameCol = $(this).find(':first'); // get column of index 0, i.e. first var cellHeight = nameCol.height(); // get the height of this cell $(this).find('td').height(cellHeight); // equalise the height across the row so removing this element will not collapse the height if it is taller than the scores and total nameTable += '<tr><td style="height: ' + cellHeight + 'px">' + nameCol.html() + '</td></tr>'; // append the next row with new height and data nameCol.remove(); // remove this cell from the table now it's been placed outside }); nameTable += '</tbody></table>'; // finish table string $('#scoreTable').before(nameTable); // insert just before the score table 

Use CSS to position them to align correctly. This is untested, but it should give you some idea.

Take a look at this jQuery plugin:

http://fixedheadertable.com/

Did u mean horizontal scrolling??

If you want to achieve horizontal scrolling then you can use 3 containers.

1. For the first column ( Name )
2. For the columns that you want to scroll. Set the overflow-x style of this container to auto
3. For the last column ( Total )

Scrolling the content of tables is an problematic issue, since there is no simple and browser-safe solution to achieve that.

The best and most secure way to do it requires JavaScript. You would achieve even horizontal Scrolling easily (it's included for free) with this technique I used. You can transform that to your problem easily:

1) I made 3 Tables

2) Placed the middle Table that holds the Data inside a DIV container

3) set the DIV style to overflow:auto

4) gave the header and footer table and the div each a width of 100%

5) surrounded everything by another div to control the overall table width

6) made very sure that the quantity of columns match in all three tables, and that all three have the same styles regarding paddings, margins and borders

now the interesting part:

6) below the last element of that table construction, write a javascript block (or include it from a file)

7) write a function that successively looks at each column (use a for loop), starting with the first one. At every iteration of that loop, check the td cell with of the first two tables in the current column. Check which with is the bigger one and assign that to the smaller td cell's style. You may want to apply that value to the footer table, too.

8) call that function. You may want to do that in an interval or when special events occur, such as new data in the cells (if using ajax for example).

Note: If you do scroll horizontally, your columns sizes are synchronized. But you will have to synchronize the scrolling position of your header and footer table with the content table. Alternatively you just let the overall div scroll the whole thing horizontally, but not vertically. That would be the job of the DIV that contains the data table.

This technique worked very well in all major browsers in an very coplex gantt diagram project.

Note: You can think of that concept easily in a 90 degrees rotated way, so that you fix the first and last header column when scrolling.

Edit: Here is another example from my code base that might help you to get the solution:

var left_td = document.getElementById("left_td"); var right_td = document.getElementById("right_td"); var contentDiv = document.getElementById("contentDiv"); window.setInterval(function(){ var left_td_width = Math.round((parseInt(contentDIV.offsetWidth) - 120) / 2); var right_td_width = (parseInt(contentDIV.offsetWidth) - left_td_width - 120; left_td.style.width = left_td_width + "px"; right_td.style.width = right_td_width + "px"; }, 25); 

This code does the following: It makes sure, that an Table with 3 columns always looks like that: The first and last column have the same size, and the center column has a width of 120 pixels. Sure that does not apply directly to your special problem, but It might give you a starting point in dynamic table manipulation through JavaScript.