最小高度和表格单元格

时间:2012-03-25 05:03:02

标签: css cross-browser cell css-tables

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

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

2 个答案:

答案 0 :(得分:23)

简答:是的。我试着加载以下代码:

<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的
    • Google Chrome 19.0
    • Firefox 13.0
    • Konqueror 4.8
  • 视窗
    • Google Chrome 19.0
    • Firefox 12.0和13.0
    • Internet Explorer 8
  • Android 2.3.3

答案 1 :(得分:20)

来自: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'值为'auto'意味着用于布局的行高是MIN。 MIN取决于细胞盒高度和细胞盒对齐(非常类似于线盒高度的计算)。 CSS 2.1没有定义在使用百分比值指定高度时如何计算表格单元格和表格行的高度。 CSS 2.1没有定义行组上“高度”的含义。

     

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