Использование Rowspan для таблицы, поведение последней строки в разных браузерах

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>

Теперь вы можете видеть, что в первой ячейке есть изображение, которое будет занимать каждую строку таблицы. Иногда это изображение будет выше, чем содержимое справа, иногда не будет ..

Теперь я применил высоту: 1% к каждому ряду, чтобы вместо Firefox пытаться равномерно распределить высоту каждого ряда в соответствии с высотой изображения. Они будут настолько малы, насколько это возможно, за исключением последнего, который будет охватывать оставшуюся часть высоты.

В 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>