【问题标题】:min-height and table cells最小高度和表格单元格
【发布时间】:2012-04-09 03:00:12
【问题描述】:

我对此进行了一些研究,但我只是想问问比我更了解的人。

为表格单元格设置高度是否仅作为最小高度? 我知道这在 Firefox 中是正确的,但是在其他浏览器中会发生这种情况吗?

【问题讨论】:

    标签: css cross-browser cell css-tables


    【解决方案1】:

    简短回答:是的。我尝试加载以下代码:

    <table border="0" style="background-color: yellow;">
        <tr style="background-color: green;">
            <td>row 0 cell 0</td>
            <td>row 0 cell 1</td>
        </tr>
        <tr style="background-color: green;">
            <td height="50">row 1 cell 0</td>
            <td>row 1 cell 1</td>
        </tr>
        <tr style="background-color: green;">
            <td style="height: 50px;">row 2 cell 0</td>
            <td>row 2 cell 1</td>
        </tr>
    </table>
    

    (高度和样式)在我尝试过的浏览器中的工作方式相同:

    • Linux
      • 谷歌浏览器 19.0
      • 火狐13.0
      • Konqueror 4.8
    • 窗口
      • 谷歌浏览器 19.0
      • Firefox 12.0 和 13.0
      • Internet Explorer 8
    • Android 2.3.3

    【讨论】:

    • 根据你的目标,同样重要的是要注意,如果你想要一个最小高度,设置最小高度将不起作用。您需要设置高度属性。
    【解决方案2】:

    来自:http://www.w3.org/TR/CSS21/visudet.html#propdef-max-height

    在 CSS 2.1 中,'min-height' 和 'max-height' 对表格、内联表格、表格单元格、表格行和行组的影响是未定义的。

    来自:http://www.w3.org/TR/CSS21/tables.html#height-layout

    “table-row”元素框的高度是在用户代理获得该行中的所有单元格后计算的:它是该行计算的“高度”中的最大值,每个单元格的计算“高度”行和单元格所需的最小高度 (MIN)。 'table-row' 的 'auto' 的 'height' 值意味着用于布局的行高是 MIN。 MIN 取决于单元框高度和单元框对齐方式(很像行框高度的计算)。 CSS 2.1 未定义在使用百分比值指定高度时如何计算表格单元格和表格行的高度。 CSS 2.1 没有定义行组中“高度”的含义。

    在 CSS 2.1 中,单元格框的高度是内容所需的最小高度。表格单元格的 'height' 属性可以影响行的高度(见上文),但不会增加单元格框的高度。

    【讨论】: