在表格上设置最大高度 [英] Setting a max height on a table

问题描述

我想设计一个有一些表的页面。看起来样式表是更痛苦，然后应该是。

I am trying to design a page where there are some tables. It seems that styling tables is much more painful then is ought to be.

问题是以下。这些表应该具有固定的高度，并且当有太多内容时，在底部显示白色空间 - 或者当有太多内容时显示垂直滚动条。

The problem is the following. The tables should have a fixed height and display either white space at the bottom - when there is too little content - or a vertical scrollbar - when there is too much. Add to this that the tables have a header which should not scroll.

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

As far as I know, the thead not scrolling is the default behaviour for tables. And a stretching tfoot could serve well for the purpose of filling with white space. Sadly, it seems that every constraint I can put on the table height is cheerfully ignored. I have tried

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

我尝试过 max-height 。我已经尝试绝对定位表，并给出顶部和底部坐标。我试图手动编辑高度在Firebug，看看是否是一个CSS特性的问题。我也试图在 tbody 上设置高度。事实是，表格始终保持高度的内容，不管我的努力。

I have tried with max-height. I have tried to position the table absolutely and give both the top and bottom coordinates. I have tried to manually edit the height in Firebug to see if it was a problem with CSS specificity. I have tried to set the height on the tbody too. Fact is, the table always stays exactly high as its content, regardless of my efforts.

当然，我可以伪造一个表与div结构，但它实际上是一个表，我害怕使用div我可能遇到一个问题，其中一些列可能不正确对齐。

Of course I could fake a table with a div structure, but it actually is a table, and I fear using divs I may run into an issue where some columns may not be properly aligned.

我应该如何给表一个高度？

How am I supposed to give a table a height?

推荐答案

p> 注意：现在这个答案不正确。

正如其他人所指出的，您无法设置表的高度，除非将其显示设置为 block ，但是获取滚动标题。所以你要找的是在上设置 height 和 display：block tbody 单独：

As others have pointed out, you can't set the height of a table unless you set its display to block, but then you get a scrolling header. So what you're looking for is to set the height and display:block on the tbody alone:

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

这里是小提琴。

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