Question

所以我有一张桌子，如下面的

<table>
 <tbody>
    <tr>
        <td rowspan="4">
            <img src="ImageofProduct.jpg" />
        </td>
        <td>ProductName</td>
        <td>Hat</td>
    </tr>
    <tr style="height:1%">
        <td>Description</td>
        <td>Descriptions here</td>
    </tr>
    <tr style="height:1%">
        <td>Description</td>
        <td>Descriptions here</td>
    </tr>
    <tr>
        <td colspan="2"><button /></td>
    </tr>
 </tbody>
</table>

现在你可以看到第一个单元格有一个img，它将跨越表格的每一行。有时这个图像会更高，然后右边的内容有时会不会......

现在我已经应用了高度：每行1％，这样火狐不会试图均匀地分散每行的高度以匹配图像的高度。它们将尽可能小，除了最后一个将跨越剩余的高度。

在Firefox中，这种方法非常完美，但在chrome中，它并不需要让其他所有行的总高度与跨越每一行的第一个单元格相匹配。

他们是否有办法让它在Chrome中正常工作？或至少两者表现相同？

Answer 1

我刚试过你的代码，它适用于我的Chrome。

然而，既然你使用表格，你总是可以回到CSS之前的日子：

<tr>
    <td>Description</td>
    <td>Descriptions here</td>
</tr>
<tr>
    <td>Description</td>
    <td>Descriptions here</td>
</tr>
<tr height="*">
    <td colspan="2"><button /></td>
</tr>

在表上使用Rowspan，跨浏览器的最后一行行为

1 个答案: