Html表中的最大高度

Question

我创建了一个表,我希望它height是800px.

如果它溢出,我想制作滚动条,但标题不会滚动.

所以我尝试添加这个CSS:

overflow: scroll;
max-height:800px;

但它对我不起作用.这是整个html文件.问题是什么？

CSS

table{
    overflow: scroll;
   text-align: center;
   margin: auto;
   max-height:800px;
}
table, td, th
{
border:1px solid green;

}
th
{
background-color:green;
color:white;
}

和HTML

<table >
  <tr>
   <th>field a</th>
   <th>field b</th>
   <th>field c</th>
   <th>field e</th>
  </tr>
  <tr>
   <td>3534534</td>
   <td>??"?</td>
   <td>6,463</td>
   <td>4,000</td>
  </tr>
  <tr>
   <td>3534534</td>
   <td>??"?</td>
   <td>6,463</td>
   <td>4,000</td>
  </tr>
</table>

谢谢!!!

Answer 1

你可以将表包装在一个div中,max-height然后overflow: scroll将该div 赋予该div

<div class="pane">
    <table>
        <tr>
            <th>field a</th>
            <th>field b</th>
            <th>field c</th>
            <th>field e</th>
        </tr>
        <tr>
            <td>3534534</td>
            <td>??"?</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        ...
    </table>
</div>

.pane {
    display: inline-block;
    overflow-y: scroll;
    max-height:200px;
}
table {
    text-align: center;
    margin: auto;
}

的jsfiddle

在纯CSS可滚动表中有另一个解决方案,带有固定标题,没有包装器div,但有一个额外的行thead和tbody周围.你将thead和tbody设置为display: block并给一个max-height和overflow-ytbody.这样可以在滚动行时使标题保持原位.但与往常一样,它带有价格标签.你必须指定列宽,因为thead和tbody由于不同步而不同步display: block

<table>
    <thead>
        <tr>
            <th>field a</th>
            <th>field b</th>
            <th>field c</th>
            <th>field e</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>3534534</td>
            <td>??"?</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        ...
    </tbody>
</table>

thead {
    display: block;
}
tbody {
    display: block;
    overflow-y: scroll;
    max-height:200px;
}
thead th, tbody td {
    width: 70px;
}

的jsfiddle

更新:

在该网站的源代码中,有关于IE和IE6的评论.它设定

thead tr {
    position: relative
}

并定义表的宽度

table {
    float: left;
    width: 740px
}

这与IE10有关,我不知道.

Answer 2

使用另一个元素包装整个表，并将这些属性提供给他：

#table-limiter {
max-height:800px;
overflow: scroll;
}

HTML示例：

<div id="table-limiter">
   <table>
      ...
   </table>
</div>

有时，样式表很麻烦:(