Html表中的最大高度

我创建一个表，我想要它的高度是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,000</td>
  </tr>
</table>

谢谢！！！

解决方法

您可以将表包装在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

还有另外一个解决方案，在Pure CSS Scrollable Table with Fixed Header没有包装div，但在行附近有一个addad和tbody。你设置thead和tbody来显示：block并赋予tbody最大高度和溢出。这样可以在滚动行时使标题保持原位。但一如以往，它带有一个价格标签。您必须指定列宽，因为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,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有关，我不知道。

原文链接：https://www.f2er.com/html/232923.html

Html表中的最大高度

解决方法

猜你在找的HTML相关文章