在表格内滚动

本文介绍了在表格内滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在一个页面里有一个简单的html表格，我需要的是让这个表格可以从里面滚动并保持表头不变。

我也需要使这张桌子适合整个屏幕，所以页脚是可见的。我不需要指定静态高度，因为此屏幕将以高分辨率显示，以像素为单位应用特定高度是没有意义的。

这里是小提琴样品：

代码：

 < div class = 容器 > 
< table class =containertbl> 
< tr> 
< td> 
< div class =header> 
这是网站的标题。 
这是网站的标题。 
这是网站的标题。 
这是网站的标题。 
这是网站的标题。 
< / div> 
< / td> 
< / tr> 
< tr> 
< td> 
< div class =content> 
< table cellspacing =0cellpadding =0> 
< thead> 
< tr> 
 col1第col2第col3第col4第col5 th lt colth th th col1 th th col4 th th col5 th th col1 th th col5 th th col4 th th col5 th的第i; COL6< /第><的第i; COL7< /第> 
< / tr> 
< / thead> 
< tbody>详情1< / td>< td>详情1< / td>< td>详情1< / td>< td>详情1< / td>< td> td>详情1< / td>< td>详情1< / td>< td>详情1< / td>< / tr>详情1< / td>< td>详情1< / td>< td>详情1< / td>< td>详情1< / td>< td> td>详情1< / td>< td>详情1< / td>< td>详情1< / td>< / tr>详情1< / td>< td>详情1< / td>< td>详情1< / td>< td>详情1< / td>< td> td>详情1< / td>< td>详情1< / td>< td>详情1< / td>< / tr>详情1< / td>< td>详情1< / td>< td>详情1< / td>< td>详情1< / td>< td> td>详情1< / td>< td>详情1< / td>< td>详情1< / td>< / tr>详情1< / td>< td>详情1< / td>< td>详情1< / td>< td>详情1< / td>< td> td>详情1< / td>< td>详情1< / td>< td>详情1< / td>< / tr>详情1< / td>< td>详情1< / td>< td>详情1< / td>< td>详情1< / td>< td> td>详情1< / td>< td>详情1< / td>< td>详情1< / td>< / tr> 
< / tbody> 
< / table> 
< / div> 
< / td> 
< / tr> 
< tr> 
< td> 
< div class =footer> 
这是网站的页脚。 
这是网站的页脚。 
这是网站的页脚。 
这是网站的页脚。 
这是网站的页脚。 
< / div> 
< / td> 
< / tr> 
< / table> 
< / div>

Css：

  .header {
 background-color：navy; 
颜色：白色; 
 padding：20px; 
} 
 
 .footer {
 background-color：navy; 
颜色：白色; 
 padding：20px; 
} 
 
 .content {
 padding：7px; 
} 
 .content表{
 width：100％; 
身高：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; 
}

解决方案

add

  height：200px; 
溢出：auto;

位于 .content 类中。
增加了小提琴：

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

  position：absolute; 
 top：0; 
剩下：0; 
 right：0; 
 bottom：0;

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

解决方案

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;

这篇关于在表格内滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！