我正在建立一个HTML表，用于HTML电子邮件中。我遇到一个奇怪的问题，在我每次将图像放入其中时，<td>都会将td（及其下方的那些图像扩展到最大宽度，将所有列都呈现到其最小宽度的右边。GoogleChrome Inspector工具指示该图像是比实际要宽得多。我将图片的大小调整为100x136px，但仍然扩大到1078px。我也尝试了其他图片，但是得到了相同的结果。可能是什么原因呢？下面是我的代码：
<!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>这是由于自动表格布局的性质所致-单元格将根据其内容收缩和增长。但是您可以table-layout: fixed;在table标记上使用来避免这种情况，并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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句