宽度不适用于内联样式

Question

我无法在下表中的<td>单元格上设置宽度属性，而且我很难绕过原因。我尝试过使用文字width="100"和内联样式width: 100px＆amp; max-width: 100px，但由于某种原因，某些单元格会自动生成宽度超过其包含的img元素的宽度。

我只是想将每个td的宽度限制在其中img的宽度，以便每行的宽度相同，图像对齐。

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

修改：我在这里使用占位符图片来保护客户端的隐私。我认为Gmail中这些图像切片之间出现的垂直“间隙”与未修复的表格宽度有关。这就是为什么我将table-layout设置为fixed并且希望将每个<td>的大小调整到图像宽度并浮动所有剩下的内容将解决问题。

<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略宽（请注意每个<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: 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>

Answer 1

我不知道这是否符合您的要求，但为了对齐这些图像，我发现创建间隙的原因是更大的td元素，我将它们设置为宽度：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>

Answer 2

根据您当前的代码：

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

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

其余的线宽为601。

底部绿线是因为当实际为191时，您将表格高度设置为192.

我说“你”做了这个，但也许这就是它从photoshop产生的方式！

Answer 3

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

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