Mar*_*ark 3 html css html5 html-table
我无法<td>在下表中的单元格上设置宽度属性,而且我很难绕过原因.我同时使用文字尝试width="100"和内联样式width: 100px及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>我不知道这是否符合您的要求,但为了对齐这些图像,我发现那些正在创建间隙的原因是更大的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>