<td> 宽度不适用于内联样式

【问题标题】：<td> width not working with inline styles<td> 宽度不适用于内联样式
【发布时间】：2018-04-30 21:56:50
【问题描述】：

我无法在下表中的&lt;td&gt; 单元格上设置宽度属性，而且我很难弄清楚原因。我试过同时使用文字width="100" 和内联样式width: 100px 和max-width: 100px，但由于某种原因，某些单元格会自动生成比它们包含的img 元素更宽的宽度。

我只是试图将每个 td 的宽度限制为其中 img 的宽度，以便每一行的宽度相同并且图像对齐。

对于上下文 - 这是一个包含来自 Photoshop 的图像“切片”的表格。内联样式是必要的，因为这是用于 Gmail 和 Outlook 中的电子邮件签名（我理解为什么这通常是一个坏主意，但在这一点上客户是老板，我只关心这个问题中的表格对齐方式）。 我将表格背景颜色更改为石灰以帮助调试。

编辑：我在此处使用占位符图像来保护客户的隐私。我认为 Gmail 中这些图像切片之间出现的垂直“间隙”与表格的宽度未固定有关。这就是为什么我将table-layout 设置为fixed 并希望将每个&lt;td&gt; 调整为图像宽度并将剩下的所有内容浮动可以解决问题。 

<table id="Table_01" width="600" height="192" border="0" cellpadding="0" cellspacing="0" style="background: lime;table-layout: fixed">
	<tbody width="600" style="display: table;max-width: 600px; width: 600px">
		<tr width="600" id="row1" style="line-height: 0;font-size: 0px;">
			<td cellspacing="0" cellpadding="0" width="600" style="line-height: 0;font-size: 0px;">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/TS20G.gif" width="600" height="114">
			</td>
		</tr>
		<tr width="600" id="row2" style="line-height: 0;font-size: 0px;">
			<td cellspacing="0" cellpadding="0" width="159" rowspan="2 " style="line-height: 0;font-size: 0px;">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/jD36x.gif" width="159" height="18">
			</td>
			<td cellspacing="0" cellpadding="0" width="152" style="line-height: 0;font-size: 0px;">
				<a href="#" target="_blank">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/fBCnK.gif" width="152" height="15" border="0"></a>
			</td>
			<td cellspacing="0" cellpadding="0" width="289" rowspan="2 " style="line-height: 0;font-size: 0px;">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/vZaBD.gif" width="289" height="18">
			</td>
		</tr>
		<tr width="600" id="row3" style="line-height: 0;font-size: 0px;">
			<td cellspacing="0" cellpadding="0" width="152" style="line-height: 0;font-size: 0px;">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/8Xdce.gif" width="152" height="3"></td>
		</tr>
		<tr width="600" id="row4" style="line-height: 0;font-size: 0px;">
			<td cellspacing="0" cellpadding="0" width="137" rowspan="4" style="line-height: 0;font-size: 0px;">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/J1iQh.gif" width="137" height="59">
			</td>
			<td cellspacing="0" cellpadding="0" width="181" style="line-height: 0;font-size: 0px;">
				<a href="#">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/34yid.gif" width="180" height="12" border="0"></a>
			</td>
			<td cellspacing="0" cellpadding="0" width="283" rowspan="2 " style="line-height: 0;font-size: 0px;">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/t84fT.gif" width="283" height="39">
			</td>
		</tr>
		<tr width="600" id="row5" style="line-height: 0;font-size: 0px;">
			<td cellspacing="0" cellpadding="0" width="181" style="line-height: 0;font-size: 0px;">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/skKMN.gif" width="180" height="27">
			</td>
		</tr>
		<tr width="600" id="row6" style="line-height: 0;font-size: 0px;">
			<td cellspacing="0" cellpadding="0" width="139" rowspan="2" style="line-height: 0;font-size: 0px;">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/MbrAv.gif" width="139" height="20">
			</td>
			<td cellspacing="0" cellpadding="0" width="161" style="line-height: 0;font-size: 0px;">
				<a href="#">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/imDAp.jpg" width="161" height="14" border="0"></a>
			</td>
			<td cellspacing="0" cellpadding="0" width="163" rowspan="2 " style="line-height: 0;font-size: 0px;">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/0TpK3.gif" width="163" height="20">
			</td>
		</tr>
		<tr width="600" id="row7" style="line-height: 0;font-size: 0px;">
			<td cellspacing="0" cellpadding="0" width="161" style="line-height: 0;font-size: 0px;">
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/9TPqy.gif" width="161" height="6">
			</td>
		</tr>
		<tr width="600" id="row8" style="line-height: 0;font-size: 0px;">
			<td>
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/25rPU.gif" width="137" height="1"></td>
			<td>
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/25rPU.gif" width="22" height="1"></td>
			<td>
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/25rPU.gif" width="117" height="1"></td>
			<td>
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/25rPU.gif" width="35" height="1"></td>
			<td>
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/25rPU.gif" width="6" height="1"></td>
			<td>
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/25rPU.gif" width="120" height="1"></td>
			<td>
				<img border="0" style="display:block;line-height: 0" src="https://i.stack.imgur.com/25rPU.gif" width="163" height="1"></td>
		</tr>
	</tbody>
</table>

编辑#2：

我可以通过完全移除固定的表格布局来靠近，但单元格仍然比其中的 img 稍宽（注意每个 &lt;td&gt; 右侧的绿色空间）：

<table id="Table_01" width="600" height="192" border="0" cellpadding="0" cellspacing="0" style="background: lime;">

  <tr id="row1" style="line-height: 0;font-size: 0px;">
    <td cellspacing="0" cellpadding="0" colspan="7" style="line-height: 0;font-size: 0px;" width="600">
      <img border="0" style="display:block;line-height: 0; width: 600px; height: auto;float:left;" src="https://i.stack.imgur.com/TS20G.gif" alt=" "></td>
  </tr>
  <tr id="row2" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" colspan="2 " rowspan="2 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; height: 18px; width: 100%;float:left;" src="https://i.stack.imgur.com/jD36x.gif" alt=" "></td>
    <td cellspacing="0" cellpadding="0" colspan="2 " style="line-height: 0;font-size: 0px;">
      <a target="_blank " style="line-height: 0;font-size: 0px;">
        <img border="0 " style="display:block;line-height: 0; height: 15px;float:left;" src="https://i.stack.imgur.com/fBCnK.gif" border="0 " alt=" "></a>
    </td>
    <td cellspacing="0" cellpadding="0" colspan="3 " rowspan="2 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: auto;float:left;" src="https://i.stack.imgur.com/vZaBD.gif" alt=" "></td>
  </tr>
  <tr id="row3" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" colspan="2 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: 152px;float:left;" src="https://i.stack.imgur.com/8Xdce.gif" height="3 " alt=" "></td>
  </tr>
  <tr id="row4" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" rowspan="4 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: 137px;float:left;" src="https://i.stack.imgur.com/J1iQh.gif" height="59 " alt=" "></td>
    <td cellspacing="0" cellpadding="0" colspan="4 " style="line-height: 0;font-size: 0px;">
      <a href="#" style="line-height: 0;font-size: 0px;">
        <img border="0 " style="display:block;line-height: 0; width: 181px;cursor: pointer;float:left;" src="https://i.stack.imgur.com/34yid.gif" height="12 " border="0 " alt=" "></a>
    </td>
    <td cellspacing="0" cellpadding="0" colspan="2 " rowspan="2 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: 283px;float:left;" src="https://i.stack.imgur.com/t84fT.gif" height="39 " alt=" "></td>
  </tr>
  <tr id="row5" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" colspan="4 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: 181px;float:left;" src="https://i.stack.imgur.com/skKMN.gif" height="27 " alt=" "></td>
  </tr>
  <tr id="row6" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" colspan="2 " rowspan="2 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: 140px;float:left;" src="https://i.stack.imgur.com/imDAp.jpg" height="20 " alt=" "></td>
    <td cellspacing="0" cellpadding="0" colspan="3 " style="line-height: 0;font-size: 0px;">
      <a href="#">
        <img border="0 " style="display:block;line-height: 0;width: 161px;cursor: pointer;float:left;" src="https://i.stack.imgur.com/imDAp.jpg" height="14 " border="0 " alt=" "></a>
    </td>
    <td cellspacing="0" cellpadding="0" rowspan="2 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: 163px;float:left;" src="https://i.stack.imgur.com/9TPqy.gif" height="20" alt=""></td>
  </tr>
  <tr id="row7" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" colspan="3" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width: 161px;float:left;" src="https://i.stack.imgur.com/9TPqy.gif" height="6 " alt=" "></td>
  </tr>
  <tr id="row8" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
    </td>
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width:22px; height: 0px;float:left;" src="https://i.stack.imgur.com/25rPU.gif" alt="">
    </td>
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width: 117px; height: 0px;float:left;" src="https://i.stack.imgur.com/25rPU.gif" height="0" alt=""></td>
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width: 35px;float:left;" src="https://i.stack.imgur.com/25rPU.gif" height="0" alt=""></td>
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width: 6px;float:left;" src="https://i.stack.imgur.com/25rPU.gif" height="0" alt=""></td>
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width: 120px;float:left;" src="https://i.stack.imgur.com/25rPU.gif" height="0" alt=""></td>
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width: 163px;float:left;" src="https://i.stack.imgur.com/25rPU.gif" height="0" alt=""></td>
  </tr>
</table>

【问题讨论】：

  • 您似乎有 7 列，但从未说明每列有多宽，而且您的第一列似乎总是跨越 2 - 需要吗？我将首先整理您的表格布局并简化它。然后整理你的图像 - 其中一些溢出了它们的列。如果你有一张决赛桌应该是什么样子的图片，那将是一个很大的帮助
  • 我会说从表中删除所有width 属性，尤其是从 tr 元素中，并放入 7 个具有正确宽度的 col 元素。
  • 这个问题能解决问题吗？ Html <td> width issue. Is it related to colspan? How?
  • 内联样式太多了。使代码更加混乱。
  • 请阅读详细信息：内联样式是必需的，因为这是用于 Gmail 和 Outlook 中的电子邮件签名

标签： css html html-table


【解决方案1】：

我不知道这是否符合您的要求，但为了对齐这些图像，我发现那些造成较大 td 元素的间隙原因的图像，我将它们设置为 width: 100% （如您的示例中所示1px 添加到 td)。

您可以看到奇怪的表格单元格宽度仍然存在，但它已被图像完全填充，因此“马赛克”图像看起来不像马赛克。

<table id="Table_01" width="600" height="192" border="0" cellpadding="0" cellspacing="0" style="background: lime;">

  <tr id="row1" style="line-height: 0;font-size: 0px;">
    <td cellspacing="0" cellpadding="0" colspan="7" style="line-height: 0;font-size: 0px;" width="600">
      <img border="0" style="display:block;line-height: 0; width: 100%; height: auto;float:left;" src="https://i.stack.imgur.com/TS20G.gif" alt=" "></td>
  </tr>
  <tr id="row2" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" colspan="2 " rowspan="2 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; height: 18px; width: 100%;float:left;" src="https://i.stack.imgur.com/jD36x.gif" alt=" "></td>
    <td cellspacing="0" cellpadding="0" colspan="2 " style="line-height: 0;font-size: 0px;">
      <a target="_blank " style="line-height: 0;font-size: 0px;">
        <img border="0 " style="display:block;line-height: 0; height: 15px;float:left;width:100%" src="https://i.stack.imgur.com/fBCnK.gif" border="0 " alt=" "></a>
    </td>
    <td cellspacing="0" cellpadding="0" colspan="3 " rowspan="2 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: auto;float:left;" src="https://i.stack.imgur.com/vZaBD.gif" alt=" "></td>
  </tr>
  <tr id="row3" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" colspan="2 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: 100%;float:left;" src="https://i.stack.imgur.com/8Xdce.gif" height="3 " alt=" "></td>
  </tr>
  <tr id="row4" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" rowspan="4 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: 137px;float:left;" src="https://i.stack.imgur.com/J1iQh.gif" height="59 " alt=" "></td>
    <td cellspacing="0" cellpadding="0" colspan="4 " style="line-height: 0;font-size: 0px;">
      <a href="#" style="line-height: 0;font-size: 0px;">
        <img border="0 " style="display:block;line-height: 0; width: 181px;cursor: pointer;float:left;" src="https://i.stack.imgur.com/34yid.gif" height="12 " border="0 " alt=" "></a>
    </td>
    <td cellspacing="0" cellpadding="0" colspan="2 " rowspan="2 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: 283px;float:left;" src="https://i.stack.imgur.com/t84fT.gif" height="39 " alt=" "></td>
  </tr>
  <tr id="row5" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" colspan="4 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: 181px;float:left;" src="https://i.stack.imgur.com/skKMN.gif" height="27 " alt=" "></td>
  </tr>
  <tr id="row6" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" colspan="2 " rowspan="2 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: 140px;float:left;" src="https://i.stack.imgur.com/imDAp.jpg" height="20 " alt=" "></td>
    <td cellspacing="0" cellpadding="0" colspan="3 " style="line-height: 0;font-size: 0px;">
      <a href="#">
        <img border="0 " style="display:block;line-height: 0;width: 161px;cursor: pointer;float:left;" src="https://i.stack.imgur.com/imDAp.jpg" height="14 " border="0 " alt=" "></a>
    </td>
    <td cellspacing="0" cellpadding="0" rowspan="2 " style="line-height: 0;font-size: 0px;">
      <img border="0 " style="display:block;line-height: 0; width: 163px;float:left;" src="https://i.stack.imgur.com/9TPqy.gif" height="20" alt=""></td>
  </tr>
  <tr id="row7" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" colspan="3" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width: 161px;float:left;" src="https://i.stack.imgur.com/9TPqy.gif" height="6 " alt=" "></td>
  </tr>
  <tr id="row8" style="line-height: 0;font-size: 0px;" width="600">
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
    </td>
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width:22px; height: 0px;float:left;" src="https://i.stack.imgur.com/25rPU.gif" alt="">
    </td>
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width: 117px; height: 0px;float:left;" src="https://i.stack.imgur.com/25rPU.gif" height="0" alt=""></td>
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width: 35px;float:left;" src="https://i.stack.imgur.com/25rPU.gif" height="0" alt=""></td>
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width: 6px;float:left;" src="https://i.stack.imgur.com/25rPU.gif" height="0" alt=""></td>
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width: 120px;float:left;" src="https://i.stack.imgur.com/25rPU.gif" height="0" alt=""></td>
    <td cellspacing="0" cellpadding="0" style="line-height: 0;font-size: 0px;">
      <img border="0" style="display:block;line-height: 0; width: 163px;float:left;" src="https://i.stack.imgur.com/25rPU.gif" height="0" alt=""></td>
  </tr>
</table>

【讨论】：

    【解决方案2】：

    根据你当前的代码：

    垂直的正确大小的绿线是因为在第 1 行上，图像是 600 像素宽，表格是 601 像素宽，尽管将表格宽度设置为 600，因为下面的行是 601。

    垂直居中的绿线是因为第 2 行第 2 列的图像是 152 宽，而在下面，第 3 行的图像是 153 宽。

    其余的行是 601 宽。

    底部的绿线是因为您将表格高度设置为 192，而实际上它是 191。

    我说“你”做了这个和那个，但也许这就是它从 Photoshop 生成的方式！

    【讨论】：

      【解决方案3】：

      由于您的图像具有不同的高度和宽度，因此设置具有正确的 colspans 和 rowspans 的表格非常复杂（如果不是不可能的话）。最好设置多个表。我知道下面的代码并不完全完美，但我希望这会有所帮助。 如您所见，您可以省略所有的高度/宽度设置。

      <html>
<head>
<style>
table {
  border-collapse: collapse;
  background-color: #ddd;
}
td {
  padding: 0;
}
</style>
</head>
<body>
    <table id="t1">
        <tr>
            <td><img src="https://i.stack.imgur.com/TS20G.gif"></td>
        </tr>
    </table>
    <table id="t2">
        <tr>
            <td rowspan="2"><img src="https://i.stack.imgur.com/jD36x.gif"></td>
            <td><img src="https://i.stack.imgur.com/fBCnK.gif"></td>
            <td rowspan="2"><img src="https://i.stack.imgur.com/vZaBD.gif"></td>
        </tr>
        <tr>
            <td><img src="https://i.stack.imgur.com/8Xdce.gif"></td>
        </tr>
    </table>
    <table id="t3">
        <tr>
            <td rowspan="4"><img src="https://i.stack.imgur.com/J1iQh.gif"></td>
            <td><img src="https://i.stack.imgur.com/34yid.gif"></td>
            <td rowspan="2"><img src="https://i.stack.imgur.com/t84fT.gif"></td>
        </tr>
        <tr>
            <td><img src="https://i.stack.imgur.com/skKMN.gif"></td>
        </tr>
        <tr>
            <td rowspan="2"><img src="https://i.stack.imgur.com/MbrAv.gif"></td>
            <td><img src="https://i.stack.imgur.com/imDAp.jpg"></td>
            <td rowspan="2"><img src="https://i.stack.imgur.com/0TpK3.gif"></td>
        </tr>
        <tr>
            <td><img src="https://i.stack.imgur.com/9TPqy.gif"></td>
        </tr>
    </table>
    <table id="t4">
        <tr>
            <td><img src="https://i.stack.imgur.com/25rPU.gif"></td>
            <td><img src="https://i.stack.imgur.com/25rPU.gif"></td>
            <td><img src="https://i.stack.imgur.com/25rPU.gif"></td>
            <td><img src="https://i.stack.imgur.com/25rPU.gif"></td>
            <td><img src="https://i.stack.imgur.com/25rPU.gif"></td>
            <td><img src="https://i.stack.imgur.com/25rPU.gif"></td>
            <td><img src="https://i.stack.imgur.com/25rPU.gif"></td>
        </tr>
    </table>
</body>
</html>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2018-01-03
        • 2018-09-26
        • 1970-01-01
        • 2021-04-07
        • 1970-01-01
        • 2011-03-19
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode