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

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上设置height和display:block：

Header stays put, no scrolling

cell 1/1cell 1/2cell 2/1cell 2/2cell 3/1cell 3/2

这是小提琴。

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。

KeyValue

BlahBlah

JSFiddle

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

3 votes

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

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

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

现场演示

标记

header col 1	header col 2
entry1 entry1 ........ all your entries

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

content

td div{

max-height:20px;

}

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

Beefjeff answered 2020-08-01T09:51:43Z

-1 votes

Header stays put, no scrolling

cell 1/1cell 1/2cell 2/1cell 2/2cell 3/1cell 3/2

Javascript部分

$(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");

});

请参阅如何为您的桌子主体设置最大可能的高度

小提琴在这里

Abhishek B. answered 2020-08-01T09:52:12Z