html-在标签上设置最大高度

我正在尝试设计一个有一些表的页面。 样式表似乎比原本要痛苦得多。

问题如下:表格应该具有固定的高度,并在底部(当内容太少时)显示空白,或者在垂直滚动条(当内容太多时)显示。 除此之外,表还有一个不应滚动的标题。

据我所知,不滚动的max-height是表的默认行为。 拉伸tbody可以很好地用于填充空白区域。 可悲的是,似乎我可以在桌子高度上施加的所有约束都被乐意忽略了。 我努力了

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

我尝试使用max-height。我尝试绝对定位表格,并给出顶部和底部坐标。 我尝试在Firebug中手动编辑高度,以查看CSS特定性是否存在问题。 我也尝试在tbody上设置高度。 事实是,无论我如何努力,桌子始终保持与内容高度相同。

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

我应该如何给桌子增高?

Andrea asked 2020-08-01T09:47:45Z
8个解决方案
26 votes

注意此答案现在不正确。 我可能稍后再讲。

正如其他人指出的那样,除非将表格的显示设置为block,否则无法设置表格的高度,但是会得到一个滚动标题。 因此,您要寻找的是仅在tbody上设置heightdisplay: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>

这是小提琴。

Dan Dascalescu answered 2020-08-01T09:48:40Z
9 votes

display:block;添加到表的CSS中。 (换句话说,..告诉表充当块元素而不是表。)

在这里摆弄

Scott answered 2020-08-01T09:49:04Z
4 votes

您可以通过使用以下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

Sibi John answered 2020-08-01T09:49:35Z
3 votes

我有一个同事问今天如何做,这就是我的想法。 我不喜欢它,但是这是一种不用js并且尊重标头的方法。 但是,主要缺点是由于不再具有真实的表头而使您失去了一些语义。

基本上,我将一个表包装在一个表中,并通过给它一个2992009946054054788096将div用作滚动容器。由于我将表包装在父表中(“ colspanning”假表头行),因此好像表尊重它们一样,但是在 实际上,子表的行数相同。

一个小问题是由于滚动条占用了空间,因此子表的列宽不会完全匹配。

现场演示

标记

<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;
}
Loktar answered 2020-08-01T09:50:17Z
1 votes

似乎与这个问题非常相似。 从那里看来,这应该可以解决问题:

table {
  display: block; /* important */
  height: 600px;
  overflow-y: scroll;
}
Wesley answered 2020-08-01T09:50:37Z
0 votes

在表格中,对于最小表格单元格高度或行高度,请使用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表格解决方案通过增加表格宽度来增加行或单元格的最大高度限制,JavaScript

Mr. Rick answered 2020-08-01T09:51:19Z
0 votes

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

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

td div{
    max-height:20px;
}

[HTTPS://JS fiddle.net/Ethan AB race/4我0看似超自然/]

Beefjeff answered 2020-08-01T09:51:43Z
-1 votes
<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>


请参阅如何为您的桌子主体设置最大可能的高度
小提琴在这里

Abhishek B. answered 2020-08-01T09:52:12Z
translate from https://stackoverflow.com:/questions/8970362/setting-a-max-height-on-a-table