在表格内滚动

Question

我在页面中有一个简单的 html 表格，我只需要让这个表格可以从内部滚动并保持表格标题不变。

我还需要让这个表格适合整个屏幕，这样页脚才可见。我不需要指定静态高度，因为此屏幕将以高分辨率显示，并且以像素为单位应用特定高度毫无意义。

这是小提琴示例：

http://jsfiddle.net/3L4zb7cf/

代码：

    <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

要使表头固定，您应该更改

position : fixed;

但在您的情况下，它与其他 css 属性冲突。所以我建议为表头创建另一个表并让它处于固定位置。

试试这个小提琴：

jsFiddle

Answer 2

添加

        height: 200px;
        overflow: auto;

在.content 类中。 升级小提琴： http://jsfiddle.net/3L4zb7cf/1/

编辑： http://jsfiddle.net/3L4zb7cf/4/

在第二个例子中，有了这些属性，我认为你可以做你想做的事：

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