Question

有没有办法让Firefox保持行高，所以如果数据没有填满整个身高，那么它会在最后一行下面留一个空白区域？ IE以这种方式运行，因此所有行都保持在最顶层。

我想用固定标题编写一个滚动表;有时桌面内容上的数据不足以填充固定的桌面高度。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="reset.css"/>
<style type="text/css">
    *    {margin:0}
    table {
        border: solid #66CC99;
        border-width: 0px 1px 1px 0px;
        width: 400px;
    }
    th, td {
        border: solid #66CC99;
        border-width: 1px 0px 0px 1px;
        padding: 4px;
    }
    th {
        background-color: #339999;
        color: #FFFFFF;
    }
    tr.alt td {
        background-color: #EEEEEE;
    }
    tbody {
        height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }
</style>
<!--[if IE]>
    <style type="text/css">
        div {
            position: relative;
            height: 200px;
            width: 416px;
            overflow-y: scroll;
            overflow-x: hidden;
            border: solid #66CC99;
            border-width: 0px 0px 1px 0px;
        }
        table {
            border-width: 1px 1px 0px 0px;
        }
        thead tr {
            position: absolute;
            top: expression(this.offsetParent.scrollTop);
        }
        tbody {
            height: auto;
        }
        table tbody tr:first-child td {
            padding: 29px 4px 4px 4px;
        }
    </style>
<![endif]-->










    </head><body>

        <table class="treeTable" id="table" cellpadding="0" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th id="col1" class="text" style="width: 100%;" nowrap="nowrap">NAME</th>
                    <th class="selectable" style="width: 14em;" id="th-122002" nowrap="nowrap">12/2002</th>
                    <th class="selectable" style="width: 14em;" id="th-122007" nowrap="nowrap">12/2007</th>
                    <th class="selectable" style="width: 14em;" id="th-072010" nowrap="nowrap">07/2010</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        123
                    </td>
                    <td>
                        123
                    </td>
                    <td>
                        123
                    </td>
                </tr>
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        123
                    </td>
                    <td>
                        123
                    </td>
                    <td>
                        123
                    </td>
                </tr>
            </tbody>
        </table>

</body></html>

Answer 1

一种在某种程度上起作用但似乎并不完美的解决方案是将其添加为最后一行：

<tr style="height: 100%;"></tr>

它似乎创建了一个空行，该行是该区域的大小，这意味着您可以滚动底部直到只有空白可能不理想。您可以稍微玩一下（可能会做一些粗略的计算，根据您有多少行计算出合理的高度）来获得有效的解决方案。

Answer 2

您是否指定了height属性，将其设置为所需的值，然后查看。

Answer 3

您可以粘贴代码吗？我还建议使用reset.css来消除不同浏览器解释代码的任何偏见。

Answer 4

如果没有值，您可以将'＆amp; nbsp'设置为数据，或者您可以将'td'标记的样式属性设置为＆lt; td style =“height：15px;”＆gt; ＆LT; / TD＆GT;

Firefox上的HTML行表高度

4 个答案: