Fatal编程技术网
  • html/
  • Html 设置桌子上的最大高度

Html 设置桌子上的最大高度

html css

Html 设置桌子上的最大高度,html,css,css-tables,Html,Css,Css Tables,我正在尝试设计一个有一些表格的页面。看起来，设计桌子的样式比它应该做的要痛苦得多 问题在于：表格应该有固定的高度，并在底部显示空白（当内容太少时）或垂直滚动条（当内容太多时）。此外，表格有一个不应滚动的标题 据我所知，thead不滚动是表的默认行为。而拉伸的tfoot可以很好地填补空白。可悲的是，似乎我对桌子高度的每一个限制都被愉快地忽略了。我试过了 table { height: 600px; overflow: scroll; } 我试过使用max height。我尝试绝对

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

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

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

table {
    height: 600px;
    overflow: scroll;
}
我试过使用
max height
。我尝试绝对定位桌子，并给出顶部和底部坐标。我曾尝试在Firebug中手动编辑高度，以查看是否存在CSS专用性问题。我也尝试过在
t车身上设置高度。事实是，不管我怎么努力，桌子总是和它的内容保持完全相同的高度

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

我该如何给桌子一个高度


添加
显示：块到表的css。（换句话说..告诉表要像块元素而不是表一样工作。）

似乎和这个问题很相似。从这里看来，这应该起到作用：


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


注意。我可能以后再谈

正如其他人所指出的，除非您将其显示设置为
block
，否则您将看到一个滚动标题。因此，您需要的是单独在
t车身
上设置
高度
和
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>




标题保持不变，没有滚动
第1/1单元
第1/2单元
第2/1单元
第2/2单元
第3/1单元
第3/2单元


这是。

标题保持不变，没有滚动
第1/1单元
第1/2单元
第2/1单元
第2/2单元
第3/1单元
第3/2单元




Javascript部分




$（文档）.ready（函数（）{
var maxHeight=Math.max.apply（null，$（“body”）.map（函数（）{return$（this.height（）；}）.get（））；
//警报（最大高度）；
var-borderheight=3；
//在maxheight中添加了一些像素
//如果设置了边框，则需要将此“borderheight”添加到maxheight变量中
$（“#tbodyMain”）.css（“最小高度”，parseInt（最大高度+边界高度）+“px”）；
});





请参考如何设置您的桌身的最大可能高度
我有一位同事今天问我如何设置，这就是我想到的。我不喜欢它，但这是一种不用js就能做到的方法，而且它的标题也得到了尊重。然而，主要的缺点是，由于不再有真正的表头，您会丢失一些语义

基本上，我将一个表包装在一个表中，并通过给它一个
max height
来使用div作为滚动容器。由于我将表包装在父表中“colspan”假标题行，因此表似乎尊重这些行，但实际上子表的行数相同

一个小问题是滚动条占用空间，子表列宽无法精确匹配



标记


<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
height:
代替
minheight:

及

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

此脚本适用于水平溢出表

此脚本每次增加表宽300px（最大4000px），直到行收缩到最大高度（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';
    }
}



var i=0，行，表=document.getElementsByTagName（'table'）[0]，j=table.offsetWidth；
while（row=table.rows[i++]）{
而（行偏视>160和&j<4000）{
j+=300；
table.style.width=j+'px'；
}
}



来源：
您可以使用以下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>




钥匙
价值
废话
废话



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


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

td div{
    max-height:20px;
}




内容
运输署分区{
最大高度：20px；
}



    

  • 设置<代码>显示：块用于
    表
    • 

  • 设置
    位置：粘性；排名：0
    • 




收割台保持不动
布局对齐
foo1
收割台保持不动
食物2
收割台保持不动





在Chrome、Firefox、Safari、Edge上进行了测试，这是一个简单的解决方法，在大多数情况下都可以使用，它将表格包装成
div
，然后为
div
指定一个
最大高度：


。可滚动包装器{
最大高度：400px；
溢出：自动；
}
/*如果需要粘性标题，还可以添加以下代码*/
.可滚动包装表THAD th{
背景：#afa；
位置：粘性；
排名：0；
盒影：0 2px2px-1pxRGBA（0,0,0,0.4）；
}





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

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

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



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



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

td div{
    max-height:20px;
}