表格中文本之间的较大空间，其中图像在HTML中具有行距

Question

我在桌子上有文字和图片：

<%= link_to update_favorites_path, remote: true do %>
    <%= favorite_text %>
<% end %>

您可以看到图片位于所有四行中，但是在文本之间有很大的间距。

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

Answer 1

由于图像具有固定的height，因此表格行的高度不会有太大变化。减小图像的height或增大图像的表格单元格的rowspan并将line-height的{​​{1}}设置为较低的值或0。

td

还有CSS

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

Answer 2

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

一个可能的解决方案是使用带有一些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>