html table <td> 随图像扩展，无论图像大小答案

【问题标题】：html table <td> expands with image, no matter the size of the imagehtml table <td> 随图像扩展，无论图像大小
【发布时间】：2021-03-02 20:42:45
【问题描述】：

我正在构建一个要在 html 电子邮件中使用的 html 表。我遇到了一个奇怪的问题，每当我将图像放入 <td> 时，它都会扩展 td（以及它下面的那些到最大宽度，将所有列向右渲染到它们的最小宽度。Google Chrome Inspector 工具表明图像比实际宽得多。我已将图像大小调整为 100x136 像素，但仍扩展为 1078 像素。我也尝试了其他图像，但得到了相同的结果。可能是什么原因造成的？下面是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            table {
                width: 100%;
                margin: 20px auto;
                border-collapse: collapse;
            }
            td {
                border: 1px solid black;
            }

            .header {
                height: 150px;
            }
            .bar {
                height: 40px;
            }
            .greeting {
                height: 300px;
            }
            .itemRow {
                height: 250px;
            }
            .footer {
                height: 75px;
            }
            .measure {
                height: 25px;
            }

            img {
            }
        </style>
    </head>
    <body>
        <table>
            <tr class="header">
                <td colspan="2" class="crest"><img src="crest.jpg" alt="" /></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr class="bar">
                <td colspan="14"></td>
            </tr>
            <tr class="greeting">
                <td colspan="14"></td>
            </tr>
            <tr class="itemRow">
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr class="measure">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr class="itemRow">
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr class="measure">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr class="itemRow">
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>

            <tr class="footer">
                <td colspan="12"></td>
                <td colspan="1"></td>
                <td colspan="1"></td>
            </tr>
        </table>
    </body>
</html>

【问题讨论】：

那是您的实际内容吗？如果是这样，img 单元格扩展的原因是因为您没有设置任何宽度并且没有其他单元格有内容，因此第一个单元格将相对于它所包含的内容量与其他单元格相比增长。如果您希望单元格缩小以适合图像，则只需设置一个小于或等于图像宽度的宽度（或开始将内容添加到其他单元格中，它可能会自行纠正）
这篇文章解释了列宽是如何决定你是否不应用宽度的：stackoverflow.com/questions/17150154/…
这也很有帮助 - 谢谢！

标签： html css html-table

【解决方案1】：

这是由于自动表格布局的性质 - 单元格会根据其内容缩小和增长。但是您可以在tabletag 上使用table-layout: fixed; 来避免这种情况，并在图像本身上使用width: 100%; height: auto 以使其适合单元格：

table {
  width: 100%;
  margin: 20px auto;
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  border: 1px solid black;
}

.header {
  height: 150px;
}

.bar {
  height: 40px;
}

.greeting {
  height: 300px;
}

.itemRow {
  height: 250px;
}

.footer {
  height: 75px;
}

.measure {
  height: 25px;
}

img {
  width: 100%;
  height: auto;
}

<table>
  <tr class="header">
    <td colspan="2" class="crest"><img src="https://placehold.it/500x300/ea8" alt="" /></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="bar">
    <td colspan="14"></td>
  </tr>
  <tr class="greeting">
    <td colspan="14"></td>
  </tr>
  <tr class="itemRow">
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
  </tr>
  <tr class="measure">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="itemRow">
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
  </tr>
  <tr class="measure">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="itemRow">
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
  </tr>

  <tr class="footer">
    <td colspan="12"></td>
    <td colspan="1"></td>
    <td colspan="1"></td>
  </tr>
</table>

【讨论】：

感谢您的建议。不幸的是，它没有用。我知道单元格可以根据其内容扩展，但我不明白为什么它的扩展甚至超过其内容的大小。如果图像只有 100px 宽，为什么它会扩大 1000px+？
它确实工作，正如您在我的答案的 sn-p 中看到的那样，我在您的问题中使用了代码并且只添加了我提到的两个设置和可以在此处加载的“真实”占位符图像。如果在您的网站中没有，则一定有其他原因导致您没有包含在问题的代码中。
我的立场是正确的。它确实有效。我忽略了您的表格布局：在我匆忙中修复了建议。谢谢您的帮助。非常感谢。