Выравнивание блоков внутри таблицы

Question

Есть таблица из 4 столбцов, внутри каждого блока столбцов есть изображение, в последнем столбце кроме изображений есть текстовые строки, их может быть произвольное количество. Как сделать так, что бы вне зависимости от количества строк в последнем столбце таблицы, изображения во всех столбцах были на одном уровне ?

<table style="height: 59px;" border="1" width="477">
  <tbody>
    <tr>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба</p>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
    <tr>
      <td style="width: 112px;"><img alt="" width="114" height="86" /></td>
      <td style="width: 112px;"><img alt="" width="114" height="86" /></td>
      <td style="width: 112px;">
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
    <tr>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

vertical-align: bottom;

td {
  vertical-align: bottom;
}

<table style="height: 59px;" border="1" width="477">
  <tbody>
    <tr>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба</p>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
    <tr>
      <td style="width: 112px;">
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
    <tr>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
  </tbody>
</table>

БЛОГ НА HUSL

Выравнивание блоков внутри таблицы

Ответы (1 шт):