变量HTML表格单元格高度？

Question

<table>
    <tr>
        <th><img src="image.jpg" /></th>
        <td>row1 column2</td>
        <td>row1 column3</td>
        <td>row1 column4</td>
    </tr>
</table>

结果
如果img的高度等于10px，则该行中所有单元格的高度等于10px。 为td添加边框会导致td看起来比img更高。 注意：img包含在th中，因为我不希望在img周围有边框，只有td的边框。

期望的结果

如上图所示，td的高度应该是可调的，这样它们的顶部和底部边框就可以与img对齐。

研究
使用CSS指定td上的高度只有在高度大于img的高度时才有效（换句话说，td不能小于img）。 其他研究表明，这只是表的工作方式。

Answer 1

一般来说，在一个表中，<td>元素在一行中都是相同的大小，这就是行的目的，你可以对齐行中的单元格内容，但是否则行会有一致的高度。行的高度默认为其中任何单元格的最大高度。水平边框通常与行一起运行。

改变这种情况的唯一方法就是使用rowspan添加额外的行进行定位，但这种情况很难实现。

请记住，表格仅适用于表格数据，一般应避免用于其他目的，尤其是布局。

Answer 2

我不确定我理解，你想要“内部”而不是“外部”的边界？

使用CSS和div可轻松完成此操作，将margin设为负值border-width。

你有没有理由使用table？

Answer 3

您可以使用以下CSS属性使边框添加框的行为类似于Internet Explorer，因为边框宽度将计算为框模型大小：

-moz-box-sizing: border-box;  
-webkit-box-sizing: border-box;  
box-sizing: border-box;

来源：http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-did-internet-explorer-get-the-box-model-right/