Question

我在页面中有一个简单的html表，我只需要从内部滚动这个表并保持表头静态。

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

这是小提琴样本：

代码：

    <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;

在表格内滚动

2 个答案: