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 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，但在行周圍有一個額外的thead和tbody 。 您將 thead 和 tbody 設置為display: block並為 tbody 提供一個max-height和overflow-y 。 這讓標題在滾動行時保持原位。 但與往常一樣，它帶有價格標簽。 您必須指定列寬，因為由於display: block導致 thead 和 tbody 不同步

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

樣式表有時是一個麻煩:(

Answer 3

這是一種方法。

使用 CSS 添加一個包裝 div：

#set-height {
    display: inline-block;
    height:800px;
    overflow: scroll;
}

小提琴： http : //jsfiddle.net/JmLFz/

Answer 4

將表格包裹在 div 標簽中，並將 div 的高度設置為 800 像素，並將溢出設置為自動。

<div style="height:800px; overflow:auto;">
//Table goes here
</div>

然后，如果您的表格高度超過 800 像素，div 中將出現一個滾動條，並允許您滾動表格。