Firefox 行跨度问题答案

【问题标题】：Firefox rowspan problemFirefox 行跨度问题
【发布时间】：2011-11-06 03:15:27
【问题描述】：

我需要一些有关 Firefox 中行跨度的帮助。我需要 1 个大单元格和 30 行（每行 7 个单元格）在大单元格旁边的较小单元格。它在 Chrome 中完全符合我的要求，但 FF 会拉伸所有较小的单元格以使整个表格为矩形或正方形。

在 http://stinak.com/?s=1&u=1 遇到此问题（例如 Collections/S/S 2012）

我想强制 FF 使这些表格看起来与 Chrome 中的相同。这意味着即使行数少于 rowspan 中设置的行数，也要将所有行对齐。

【问题讨论】：

标签： html firefox stretch html-table

【解决方案1】：

我不知道规范对此有何规定，但 Chrome 的行为看起来是错误的。我的其他浏览器（Opera、Firefox 和 Internet Explorer）都没有以这种方式呈现表格。

我认为摆脱桌子会更容易：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
div.gallery{
    width: 750px;
    font-size: 0;
    overflow: hidden;
}
div.gallery div.large{
    float: left;
    width: 400px;
}
div.gallery div.thumbs{
    float: left;
    width: 350px;
}
div.gallery div.thumbs div{
    display: inline-block;
}
--></style>
</head>
<body>


<div class="gallery">
    <div class="large"><img src="http://placehold.it/400x600"></div>

    <div class="thumbs">
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>

            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>

            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>

            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>

            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
        </div>
</div>

</body>
</html>

使用表格完成精确的像素布局可能是一场噩梦。

【讨论】：

在这个特定问题上，似乎 div 比表格更有效，谢谢。
@Madr - 这实际上是一个普遍问题。在表格中设置特定的单元格高度几乎是不可能的。