html - 在表格内滚动

Question

我在页面中有一个简单的 html 表格，我需要做的就是使该表格从内部可滚动并保持表格标题静态。

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

这是 fiddle 示例:

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 属性冲突。所以我建议为标题创建另一个表并让它处于固定位置。

试试这个 fiddle :

jsFiddle