Html表中的最大高度 [英] Max-Height in Html Table

问题描述

我创建一个表，我想要 height 为 800px 。

I create a table, and I want it's height be 800px.

如果溢出，我想要滚动条，但标题不滚动。

If it's overflow, I want to make Scroll Bar but the Titles does not scroll.

所以我试图添加这个CSS：

So I try to add this CSS:

overflow: scroll;
max-height:800px;

但它不适合我。这是整个html文件。问题是什么？

But it's not work for me. This is the entire html file. What is the problem?

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>

谢谢!!!

推荐答案

您可以将表格封装在div中，并赋予 max-height 和 overflow：scroll to the div

You can wrap the table in a div and give the max-height and overflow: scroll to that 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>

b $ b

.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，但有一个在行周围添加 thead 和 tbody 您将thead和tbody设置为 display：block 并为tbody提供 max-height 和 overflow-y 标题在滚动行时保持不变。但一如既往，它带有一个价格标签。您必须指定列宽，因为 display：block

There's another solution at Pure CSS Scrollable Table with Fixed Header without a wrapper div, but with an additional thead and tbody around the rows. You set the thead and tbody to display: block and give a max-height and overflow-y to the tbody. This lets the header stay in place when scrolling the rows. But as always, it comes with a price tag. You have to specify the column widths, because the thead and tbody are out of sync due to the 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>

b $ b

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

JSFiddle < a>

JSFiddle

更新：

在该网站的源代码中是关于IE和IE6的评论。它设置

In the source code of that site, there are comments about IE and IE6. It sets

thead tr {
    position: relative
}

并通过

table {
    float: left;
    width: 740px
}

这与IE10相关，我不知道。

Wheter this is relevant for IE10, I don't know.

这篇关于Html表中的最大高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！