1

[The solution to my problem only needs to work in Chrome; this is for use in an internal environment where we have control of the browser being used.]

Problem:

I have a table where all but one of the cells is a fixed width, except for the last cell which simply takes up the rest of the space. My issue is that I need this table to be a fixed height and the body isn't scrolling as demonstrated here: http://jsfiddle.net/2zE5j/11/

table tbody {
    /*display:block;*/
    height:200px;
    overflow:hidden;
    overflow-y:auto;
}

Table cells with proper widths, but can't scroll

According to this answer you can use display:block; to make the table scrollable within the fixed height. However, while it does now scroll, when I do that it completely messes up the cell widths as seen here: http://jsfiddle.net/2zE5j/12/

table tbody {
    display:block;
    height:200px;
    overflow:hidden;
    overflow-y:auto;
}

Table that can scroll, but cell widths are messed up

There is only a single line difference between the two jsfiddles.

Question:

So, how can I have a table where both the last cell has a dynamic width and the body is scrollable?

Community
  • 1
  • 1
user3058428
  • 41
  • 1
  • 4
  • The "scrolling table" is one of those conundrums in html. It's possible to kludge together a solution, but it probably won't look very nice if you want the dynamic width of the one column. There are always the table plugins. How many columns do you have in your real table? – TimSPQR Jun 20 '14 at 20:47
  • Depending on how many rows and columns you have you could kludge something together like this - http://jsfiddle.net/kU7sJ/ - took about 20 mins - not pretty but could be spiffed a little. – TimSPQR Jun 20 '14 at 21:20
  • Here's one a bit more spiffy - http://jsfiddle.net/kU7sJ/1/ – TimSPQR Jun 21 '14 at 02:13

1 Answers1

0

I've come to the conclusion that it's not worth my time to solve this with CSS, even though it really shouldn't have been that hard to do. TimSPQR's suggestions were ok but broke other things on my actual page and weren't worth the pain. Instead I've resorted to using javascript to change some global CSS settings for the specific column in question. This also allows the dynamic column to be in the middle of the table instead of just the last one.

window.onresize = function () {
    var rule = getCSSRule('.expand');
    rule.style.width = (document.getElementById('demoTable').clientWidth - 153) + 'px';
};

You can see the rest of my code here: http://jsfiddle.net/2zE5j/17/

user3058428
  • 41
  • 1
  • 4