在桌子上设置最大高度

Question

我正在尝试设计一个包含一些表格的页面。看起来样式表比它应该的要痛苦得多。

问题如下：表格应该有一个固定的高度，并在底部显示空白（当内容太少时）或垂直滚动​​条（当内容太多时）。再加上表格有一个不应滚动的标题。

据我所知，thead 不滚动是表格的默认行为。拉伸tfoot 可以很好地填充空白。可悲的是，似乎我可以对桌子高度施加的每一个约束都被愉快地忽略了。我试过了

table {
    height: 600px;
    overflow: scroll;
}

我试过max-height。我试图绝对定位表格并给出顶部和底部坐标。我试图在 Firebug 中手动编辑高度，看看它是否是 CSS 特异性的问题。我也尝试在tbody 上设置高度。事实是，表格始终保持与其内容完全相同的高度，无论我如何努力。

当然我可以伪造一个具有 div 结构的表格，但它实际上是一个表格，我担心使用 div 可能会遇到一些列可能无法正确对齐的问题。

我应该如何给桌子一个高度？

Answer 1

注意 this answer is now incorrect。我可能稍后再讨论。

正如其他人指出的那样，您 can't set the height of a table 除非您将其显示设置为 block，但随后您会得到一个滚动标题。所以你要找的是单独在tbody 上设置height 和display:block：

<table style="border: 1px solid red">
    <thead>
        <tr>
            <td>Header stays put, no scrolling</td>
        </tr>
    </thead>
    <tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
        <tr>
            <td>cell 1/1</td>
            <td>cell 1/2</td>
        </tr>
        <tr>
            <td>cell 2/1</td>
            <td>cell 2/2</td>
        </tr>
        <tr>
            <td>cell 3/1</td>
            <td>cell 3/2</td>
        </tr>
    </tbody>
</table>

这里是the fiddle。

Answer 2

• 将display: block; 设置为table
• 为标题行设置position: sticky; top: 0;

<table style="display: block; height: 100px; overflow: auto;">
  <thead>
    <tr>
      <td style="position: sticky; top: 0;">Header stays put</td>
      <td style="position: sticky; top: 0;">Layout aligned</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>foo1</td>
      <td>Header stays put</td>
    </tr>
    <tr>
      <td>foo2</td>
      <td>Header stays put</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/0zxk18fp/

在 Chrome、Firefox、Safari、Edge 上测试

Answer 3

将display:block; 添加到表格的css。 （换句话说..告诉表格像块元素而不是表格一样。）

fiddle here

Answer 4

您可以使用以下 css 来做到这一点。

.scroll-thead{
    width: 100%;
    display: inline-table;
}

.scroll-tbody-y
{
    display: block;
    overflow-y: scroll;
}

.table-body{
    height: /*fix height here*/;
}

以下是 HTML。

<table>
 <thead class="scroll-thead">
          <tr> 
           <th>Key</th>
           <th>Value</th>
          </tr> 
         </thead>
         <tbody class="scroll-tbody-y table-body">
          <tr> 
          <td>Blah</td> 
          <td>Blah</td> 
          </tr> 
</tbody>
</table>

JSFiddle

Answer 5

今天我有一位同事问我该怎么做，这就是我想出的。我不喜欢它，但它 是 一种无需 js 并尊重标题的方法。然而，主要缺点是由于不再有真正的表头，您会失去一些语义。

基本上我将一个表包装在一个表中，并通过给它一个max-height 来使用一个 div 作为滚动容器。由于我将表包装在父表中“跨栏”假标题行，它看起来好像表尊重它们，但实际上子表只有相同的行数。

一个小问题，由于滚动条占用空间，子表列的宽度不会完全匹配。

Live Demo

标记

<table class="table-container">
    <tbody>
        <tr>
            <td>header col 1</td>
            <td>header col 2</td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="scroll-container">
                    <table>
                        <tr>
                            <td>entry1</td>
                            <td>entry1</td>
                        </tr>
                       ........ all your entries
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

.table-container {
    border:1px solid #ccc;
    border-radius: 3px;
    width:50%;
}
.table-container table {
    width: 100%;
}
.scroll-container{
    max-height: 150px;
    overflow-y: scroll;
}

Answer 6

似乎与this 问题非常相似。从那里看来，这应该可以解决问题：

table {
  display: block; /* important */
  height: 600px;
  overflow-y: scroll;
}

Answer 7

在大多数情况下都可以使用一种简单的解决方法，即将表格包装在 div 中，然后将 max-height 提供给 div：

.scrollable-wrapper {
  max-height: 400px;
  overflow: auto;
}

/* Add also the following code if sticky header is wanted */
.scrollable-wrapper table thead th {
  background: #afa;
  position: sticky;
  top: 0;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

<div class="scrollable-wrapper">
  <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Text</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

Codepen：https://codepen.io/Conejoo/pen/NWpjmYw

Answer 8

在表格中，对于最小表格单元格高度或行高，请使用 css height: 代替 min-height:

与

使用 Javascript 限制表格中所有单元格或行的最大高度：

此脚本适用于水平溢出表。

此脚本每次将表格宽度增加 300px（最大 4000px），直到行缩小到 max-height(160px) ，您也可以根据需要编辑数字。

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
    while (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

来源：HTML Table Solution Max Height Limit For Rows Or Cells By Increasing Table Width, Javascript

Answer 9

在需要滚动的内容周围使用具有最大高度和最小高度的 div。

<tr>
    <td>
        <div>content</div>
    </td>
</tr>

td div{
    max-height:20px;
}

https://jsfiddle.net/ethanabrace/4w0ksczr/

Answer 10

<table  style="border: 1px solid red">
            <thead>
                <tr>
                    <td>Header stays put, no scrolling</td>
                </tr>
            </thead>
            <tbody id="tbodyMain" style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
                <tr>
                    <td>cell 1/1</td>
                    <td>cell 1/2</td>
                </tr>
                <tr>
                    <td>cell 2/1</td>
                    <td>cell 2/2</td>
                </tr>
                <tr>
                    <td>cell 3/1</td>
                    <td>cell 3/2</td>
                </tr>
            </tbody>
        </table>

Javascript 部分

<script>
$(document).ready(function(){
   var maxHeight = Math.max.apply(null, $("body").map(function () { return $(this).height(); }).get());
   // alert(maxHeight);
    var borderheight =3 ; 
    // Added some pixed into maxheight 
    // If you set border then need to add this "borderheight" to maxheight varialbe
   $("#tbodyMain").css("min-height", parseInt(maxHeight + borderheight) + "px");             
});

</script>

请参阅如何为您的表格主体设置最大可能高度
Fiddle Here