设置桌子的最大高度

问题描述 投票:0回答:12

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

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

据我所知,

thead
不滚动是表格的默认行为。拉伸的
tfoot
可以很好地用于填充空白。可悲的是,似乎我可以对桌子高度施加的每一个限制都被高高兴兴地忽略了。我试过了

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

我试过

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

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

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

html css css-tables
12个回答
26
投票

注意这个答案现在是不正确的。我可能会在稍后再回来。

正如其他人指出的那样,您

不能设置表格的高度,除非您将其显示设置为block

,但随后您会得到一个滚动标题。所以你要找的是单独在 
height
 上设置 
display:block
tbody

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

这是

小提琴.


18
投票
    设置
  • 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 上测试


8
投票
添加

display:block;

到表格的CSS。 (换句话说.. 告诉表格像块元素而不是表格。)

在这里小提琴


5
投票
您可以使用以下 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


3
投票
今天有个同事问我怎么做,这就是我想出的。我不喜欢它,但它

is 是一种无需 js 即可完成并尊重标头的方法。然而,主要的缺点是你失去了一些语义,因为不再有真正的表头了。

基本上我将表格包裹在表格中,并通过给它一个

max-height

来使用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; }
    

2
投票
似乎与

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

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

2
投票
在大多数情况下可用的简单解决方法是将表格包裹在

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


1
投票
在表格中,对于最小表格单元格高度或行高,使用 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


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

<tr> <td> <div>content</div> </td> </tr> td div{ max-height:20px; }

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


0
投票
试试这个。

<div style="max-height: 400px; overflow: scroll"> <!--This is your table--> <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> </div>
    

0
投票
这就是我的答案:

HTML

<div class="table-wrapper"> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2sssssssssssssssss</td> <td>Row 1, Cell 3</td> </tr> <!-- More rows... --> </tbody> </table> </div>
CSS

table{ display:table; width:100%; table-layout: fixed; } thead{ position:sticky; top:0; } .table-wrapper{ overflow:auto; height:300px; }
随意添加许多条目。

JSFiddle


-1
投票
<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>

请参考如何为您的桌身设置最大可能高度

在这里小提琴

© www.soinside.com 2019 - 2024. All rights reserved.