阻止一个 td 元素影响同级 td 元素的高度答案

【问题标题】：Stop one td element from effecting height of sibling td element阻止一个 td 元素影响同级 td 元素的高度
【发布时间】：2012-09-01 14:36:08
【问题描述】：

我有一个带有 3 个 td 元素的 tr 元素。第一个和最后一个 td 包含图像，中间 td 包含文本。中间 td 的高度受第一个和第三个 td 中图像高度的影响。我如何对其进行编码，以使中间 td 始终具有小于第一个和第三个的固定高度。或者，问这个问题的另一种方式是，如何编写代码以使每个 td 内容的高度不会影响同级 td？我正在尝试为 html 电子邮件制作带有环绕效果的功能区..

用 CSS 设置中间 td 的高度不起作用。

 <table align="center" style="width:740px;" border="0" cellpadding="0" cellspacing="0">

    <tr>
          <td>
          <img style="border:none;" src="imageAlt2/sliceLeft.png" /></td>


      <td style=" background:#0082c8; color:#fff; padding:20px 50px;">"The amount of time it has saved us is pretty much immeasurable" </td>

            <td><img style="border:none;" src="imageAlt2/sliceRight.png" /></td>
    </tr>
  </table>

对于下面的屏幕，您可以看到中间和第三个 td。中间 td 的高度受第三个 td 中图像高度的影响。显然，要获得 3D 效果，中间的 td 需要有更短的高度。

【问题讨论】：

添加您预期结果的屏幕截图。
您正在使用表格进行布局，不是吗？那就是疯狂。而且，可能有很多（有效的）批评。除非您的内容是表格数据，否则（请）不要使用table。
这是一个 HTML 电子邮件，所以我几乎必须这样做。我在我的问题中指定了这一点。
@MarkBubel 你如何有？你不能使用<div>s？

标签： html html-email html-table

【解决方案1】：

使用 CSS 指定 td 的高度只有在高度大于 img 的高度时才有效（换句话说，td 不能小于 img）。这就是表格的工作方式。

【讨论】：

【解决方案2】：

您是否尝试过 CSS overflow（或 overflow-y）属性？

overflow: hidden;
height: 50px;

Looks like你可能还需要table-layout: fixed。

【讨论】：