-1

我在表格中有文字和图片：

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

如您所见，图片在所有四行中，但在文本之间留出了很大的空格[下图]。

示例图片

我可以将文本和图像保留在表格中并缩小文本之间的空间吗？

4

2 回答 2

0

由于您对图像进行了固定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>

和CSS

td{
    line-height: 0; 
}
于 2018-11-03T10:44:31.297 回答
0

发生的情况是左侧单元格中的文本将跨越单元格的整个高度，图片占据指定数量的行。

一个可能的解决方案是使用带有一点 CSS 的其他 html 元素。

例如：

<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>
于 2018-11-03T10:49:41.360 回答