Scroll inside the table

Question

I have a simple html table inside a page, all I need is to make this table scrollable from inside and keep the table header static.

I also need to make this table fit the whole screen, so the footer is visible. I don't need to specify a static height, as this screen will be displayed on high resolutions and it makes no sense to apply specific height in pixels.

Here is the fiddle sample:

http://jsfiddle.net/3L4zb7cf/

Code:

    <div class="container">
        <table class="containertbl">
            <tr>
                <td>
                    <div class="header">
                        This is the Header for the website.
                        This is the Header for the website.
                        This is the Header for the website.
                        This is the Header for the website.
                        This is the Header for the website.
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="content">
                        <table cellspacing="0" cellpadding="0">
                            <thead>
                                <tr>
                                    <th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td></tr>
                                <tr><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td></tr>
                                <tr><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td></tr>
                                <tr><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td></tr>
                                <tr><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td></tr>
                                <tr><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td><td>details 1</td></tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="footer">
                        This is the Footer for the website.
                        This is the Footer for the website.
                        This is the Footer for the website.
                        This is the Footer for the website.
                        This is the Footer for the website.
                    </div>
                </td>
            </tr>
        </table>
    </div>

Css:

        .header {
            background-color: navy;
            color: white;
            padding: 20px;
        }

        .footer {
            background-color: navy;
            color: white;
            padding: 20px;
        }

        .content{
            padding: 7px;
        }
        .content table {
            width: 100%;
            height: 100%;
        }

        .content table thead tr th{
            color: aliceblue;
            background-color: darkgoldenrod;
            border: 1px solid #98bf21;
        }

        .content table tbody tr td{
            text-align: center;
            border: 1px solid #98bf21;
        }

        .tbl{
        }

        .container{
            width: 100%;
            background-color: lightblue;
        }

        .containertbl {
            height: 100%;
        }

        body{
            margin: 0;
            font-family: cursive;
        }

Answer 1

To make the table header fixed you should change the

position : fixed;

But in your case it's conflicting with other css properties. So I would suggest to create another table for the header and let it be in fixed position.

Try this fiddle :

jsFiddle

Answer 2

add

        height: 200px;
        overflow: auto;

in .content class. uptated fiddle: http://jsfiddle.net/3L4zb7cf/1/

edit: http://jsfiddle.net/3L4zb7cf/4/

In this second exemple, with those property, I think you can do what you want:

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;