Question

我正在尝试设计一个有一些表格的页面。似乎样式表比应该更加痛苦。

问题如下。桌子应该有一个固定的高度，并且当底部太少时，显示底部的空白区域 - 或者当内容太少时显示空白 - 或者显示垂直滚动条。除此之外，这些表有一个不应滚动的标题。

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

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

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

当然我可以伪造一个带有div结构的表，但它实际上是一个表，我担心使用div我可能遇到一些问题，其中某些列可能没有正确对齐。< / p>

我该怎样给桌子一个高度？

Answer 1

注意 this answer is now incorrect。我可能会在以后再回来。

正如其他人所指出的那样，你can't set the height of a table除非你将其显示设置为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>

这是the fiddle。

Answer 2

将display:block;添加到表格的css中。（换句话说......告诉表格像块元素而不是表格。）

fiddle here

Answer 3

您可以使用以下css执行此操作。

<cfcomponent displayname="AmazonOrderDetails">
    <cfoutput>
    <cfset variables.timeStamp = getIsoTimeString(now())>

    <cffunction name="getOrderDetails" access="remote" returntype="any">
        <cfhttp url="https://mws.amazonservices.com/Orders/2013-09-01" method="POST">
            <cfhttpparam name="AWSAccessKeyId" type="url" value="XXXXXXXXXXXXX">
            <cfhttpparam name="Action" type="url" value="ListOrders">
            <cfhttpparam name="Marketplace" type="url" value="XXXXXXXXXXXXXX">
            <cfhttpparam name="Merchant" type="url" value="XXXXXXXXXXXXX">
            <cfhttpparam name="SignatureMethod" type="url" value="HmacSHA256">
            <cfhttpparam name="SignatureVersion" type="url" value="2">  
            <cfhttpparam name="Signature" type="url" value="#generateSignature()#"> 
            <cfhttpparam name="Timestamp" type="url" value="#variables.timeStamp#">
            <cfhttpparam name="Version" type="url" value="2013-09-01">      
            <cfhttpparam name="CreatedAfter" type="url" value="#getIsoTimeString(dateAdd("m", -1, now()))#">    
        </cfhttp>
        <cfdump var="#cfhttp.Filecontent#">
    </cffunction>

    <cffunction name="HMAC_SHA256" returntype="string" access="private" output="false">
        <cfargument name="Data" type="string" required="true" />
        <cfargument name="Key" type="string" required="true" />
        <cfargument name="Bits" type="numeric" required="false" default="256" />

        <cfset local.i = 0 />
        <cfset local.HexData = "" />
        <cfset local.HexKey = "" />
        <cfset local.KeyLen = 0 />
        <cfset local.KeyI = "" />
        <cfset local.KeyO = "" />

        <cfset local.HexData = BinaryEncode(CharsetDecode(Arguments.data, "iso-8859-1"), "hex") />
        <cfset local.HexKey = BinaryEncode(CharsetDecode(Arguments.key, "iso-8859-1"), "hex") />
        <cfset local.KeyLen = Len(local.HexKey)/2 />

        <cfif local.KeyLen gt 64>
            <cfset local.HexKey = Hash(CharsetEncode(BinaryDecode(local.HexKey, "hex"), "iso-8859-1"), "SHA-256", "iso-8859-1") />
            <cfset local.KeyLen = Len(local.HexKey)/2 />
        </cfif>

        <cfloop index="i" from="1" to="#KeyLen#">
            <cfset local.KeyI = local.KeyI & Right("0"&FormatBaseN(BitXor(InputBaseN(Mid(local.HexKey,2*i-
        1,2),16),InputBaseN("36",16)),16),2) />
            <cfset local.KeyO = local.KeyO & Right("0"&FormatBaseN(BitXor(InputBaseN(Mid(local.HexKey,2*i-
        1,2),16),InputBaseN("5c",16)),16),2) />
        </cfloop>

        <cfset local.KeyI = local.KeyI & RepeatString("36",64-local.KeyLen) />
        <cfset local.KeyO = local.KeyO & RepeatString("5c",64-local.KeyLen) />

        <cfset local.HexKey = Hash(CharsetEncode(BinaryDecode(local.KeyI&local.HexData, "hex"), "iso-8859-1"), "SHA-256", "iso-8859-1")
        />
        <cfset local.HexKey = Hash(CharsetEncode(BinaryDecode(local.KeyO&local.HexKey, "hex"), "iso-8859-1"), "SHA-256", "iso-8859-1") />

        <cfreturn Left(local.HexKey,arguments.Bits/4) />
    </cffunction>

    <cffunction name="getIsoTimeString" returntype="Any" access="private">
        <cfargument name="datetime" type="date" required="true">
        <cfset local.convertToUTC = true>
        <cfif local.convertToUTC >
            <cfset local.datetime = dateConvert( "local2utc", arguments.datetime )>
            <cfreturn(
                dateFormat( local.datetime, "yyyy-mm-dd" )&"T"&timeFormat( local.datetime, "HH:mm:ss" )&"Z"
            )>
        </cfif>
    </cffunction>

    <cffunction name="generateSignature" returntype="String" access="private">
        <cfset local.secret_key="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">

        <cfset parameters = structNew() >
        <cfset parameters["xxxxxxxxxxxxxxxxxxxx"] = "UserID">
        <cfset parameters["1.0"] = "Version">
        <cfset parameters["ListOrders"] = "Action">
        <cfset parameters["#variables.timeStamp#"] = "Timestamp">
        <cfset local.strtohash = "" >
        <cfloop list="#ArrayToList(StructSort(parameters, "text", "asc"))#" index="key" >
            <cfset local.strtohash = local.strtohash & #parameters[key]# & "=" & #URLEncodedFormat(key)# & "&" >
        </cfloop>
        <cfset local.strtohash = RemoveChars(local.strtohash, len(local.strtohash), 1)>
        <cfset local.strtohash = Replace(local.strtohash, "%2D", "-", "All")>
        <cfset local.strtohash = Replace(local.strtohash, "%2E", ".", "All")>
        <cfset local.signature="#LCase(toBase64(HMAC_SHA256(local.strtohash, local.secret_key)))#"> 
        <cfreturn local.signature>  
    </cffunction>

    </cfoutput>
</cfcomponent>

以下是HTML。

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

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

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

JSFiddle

Answer 4

为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上进行过测试

Answer 5

我有一个同事问今天怎么做，这就是我想出来的。我不喜欢它，但它是一种没有js的方法，并且头部受到尊重。然而，主要的缺点是由于没有真正的表头而丢失了一些语义。

基本上我将一个表包装在一个表中，并使用div作为滚动容器，给它一个max-height。因为我将表封装在父表“colspanning”中，所以伪表头行显示就像表格尊重它们一样，但实际上子表只有相同的行数。

由于滚动条占用空间，子表格列宽度不会完全匹配，这是一个小问题。

<强> Live Demo

<强>标记

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

Answer 6

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

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

Answer 7

在表格中，对于最小表格单元格高度或行高度，使用css height:代替min-height:

和

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

来源：HTML Table Solution Max Height Limit For Rows Or Cells By Increasing Table Width, Javascript

Answer 8

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

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

td div{
    max-height:20px;
}

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

Answer 9

在大多数情况下可用的简单解决方法是将表格包装在 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>

代码笔：https://codepen.io/Conejoo/pen/NWpjmYw

Answer 10

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

请参阅如何设置表体最大可能高度 Fiddle Here

在表格上设置最大高度

10 个答案: