最小高度和表格单元格

Tha*_*Guy 29 css cross-browser cell css-tables

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

将高度设置为表格单元格仅作为最小高度是真的吗?我知道在Firefox中这是真的,但是其他浏览器会发生什么呢?

小智 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>
Run Code Online (Sandbox Code Playgroud)

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

  • Linux的
    • 谷歌Chrome 19.0
    • Firefox 13.0
    • Konqueror 4.8
  • 视窗
    • 谷歌Chrome 19.0
    • Firefox 12.0和13.0
    • Internet Explorer 8
  • Android 2.3.3

  • 根据您的目标,同样重要的是要注意,如果您想要一个最小高度,设置最小高度将不起作用.您需要设置height属性. (19认同)

Ada*_*ley 21

来自: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

一旦用户代理具有行中的所有单元格,就会计算"表格行"元素框的高度:它是行的计算"高度"的最大值,即行中每个单元格的计算"高度",和细胞所需的最小高度(MIN).'table-row'的'auto'值为'auto'意味着用于布局的行高是MIN.MIN取决于细胞盒高度和细胞盒对齐(非常类似于线盒高度的计算).CSS 2.1没有定义在使用百分比值指定高度时如何计算表格单元格和表格行的高度.CSS 2.1没有定义行组上"高度"的含义.

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