Question

I have a table which consists of a header row, a footer row and a row in between with data.

All of html, body, table have a height of 100%. The middle row also has a td with height: 100% so that it fills up the remaining space neatly: http://jsfiddle.net/9cEhc/2/.

However, when the data doesn’t fit in the middle row, I’d like to show a scrollbar so that the table keeps its 100% height and you can scroll through the middle row. Somehow this is not working; instead the table is growing in vertical direction (even though the CSS still states its height should be 100%), and the scrollbar is shown but disabled (since there is nothing to scroll as the table has stretched instead): http://jsfiddle.net/9cEhc/3/.

So, the table is set at height: 100%, but although the body is e.g. 456px high, the table (a direct child of the body) is 1368px high, which shouldn’t happen.

HTML:

<table>
    <tr>
        <td>
            header
        </td>
    </tr>
    <tr class="fillup">
        <td>
            <!-- much data that doesn't fit in the row -->
        </td>
    </tr>
    <tr>
        <td>
            footer
        </td>
    </tr>
</table>

CSS:

html, body, table, tbody {
    width: 100%;
    height: 100%;
}

html, body, table, tbody, tr, td {
    padding: 0;
    margin: 0;
}

.fillup td {
    height: 100%;
    overflow-y: scroll;
}

As a side note, I’d like to get this working on Chrome. I don’t mind so much about other browsers.

How can I prevent the table from stretching in case of too much data, and instead show a scrollbar for the middle row?

Answer 1

Try this for the first problem (larger than parent): http://jsfiddle.net/9cEhc/4/

<table cellpadding="0" cellspacing="0">

I do not know how to put cellspacing to 0 by CSS.

EDIT:

Working demo with scrollbar (Chrome): http://jsfiddle.net/9cEhc/5/

But you do need to put down a DIV inside the td.

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>
            header
        </td>
    </tr>
    <tr class="fillup">
        <td>
            <DIV STYLE="overflow-y: scroll; overflow-x: no; height: 100%; width: 100%">
            list<br>list<br>list<br>list<br>list<br>list<br>
            list<br>list<br>list<br>list<br>list<br>list<br>
            ............ // and more
        </div>
        </td>
    </tr>
    <tr>
        <td>
            footer
        </td>
    </tr>
</table>