Большое пространство между текстом в таблице, где изображение имеет размер строки в HTML

Question

У меня есть текст и изображение в таблице:

<table>
       <tr><td>Jon Kowalsky</td>
       <td rowspan="4"><img src="forrest.jpg"  height="150px"/></td></tr>
       <tr><td>Eagle Rock Ave</td></tr>
       <tr><td>New York</td></tr>
       <tr><td><a href="mailto:ja@jankowalski.pl">ja@jankowalski</a></td></tr>
</table>

Как вы можете видеть, изображение находится во всех четырех строках, но между текстом остается большое пространство [изображение ниже].

Можно ли сохранить текст и изображение в таблице и уменьшить расстояние между текстом?

Answer 1

То, что происходит, - то, что текст в ячейках слева будет охватывать всю высоту ячейки с картиной, занимающей указанное количество строк.

Возможное решение - использовать другие HTML-элементы с небольшим количеством CSS.

Например:

<div class="details">
    <p>Jon Kowalsky</p>
    <p>Eagle Rock Ave</p>
    <p>New York</p>
    <p><a href="mailto:ja@jankowalski.pl">ja@jankowalski</a></p>
</div>
<img src="forrest.jpg"  height="150px"/></td>

<style>
.details {
    float: left;
}

.details p:first-child {
    margin-top: 20px;
}

.details p {
    margin: 0;
}
</style>

Answer 2

Поскольку у вас есть фиксированное height для изображения, высота строки таблицы не сильно меняется. Либо уменьшите height изображения, либо увеличьте rowspan ячейки таблицы изображения и установите для line-height из td более низкое значение или 0.

<table>
       <tr><td>Jon Kowalsky</td>
       <td rowspan="6"><img src="forrest.jpg"  height="150px"/></td></tr>
       <tr><td>Eagle Rock Ave</td></tr>
       <tr><td>New York</td></tr>
       <tr><td><a href="mailto:ja@jankowalski.pl">ja@jankowalski</a></td></tr>
       <tr></tr>
       <tr></tr>
</table>

И КСС

td{
    line-height: 0; 
}