Css <；td>；宽度不适用于内联样式_Css_Html_Html Table

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

css html

Css <；td>；宽度不适用于内联样式,css,html,html-table,Css,Html,Html Table,我无法设置下表中单元格的宽度属性，我很难理解为什么。我已经尝试使用literalwidth=“100”和内联样式width:100px&max width:100px，但由于某些原因，某些单元格会自动生成比它们包含的img元素更宽的宽度我只是想把每个td的宽度限制在它里面img的宽度上，这样每一行的宽度都是相同的，图像也会对齐对于上下文-这是一个包含来自photoshop的图像“切片”的表。内联样式是必要的，因为这是Gmail和Outlook中的电子邮件签名（我理解为什么这通常是个坏主意，但

我无法设置下表中

单元格的宽度属性，我很难理解为什么。我已经尝试使用literal

width=“100”

和内联样式

width:100px

max width:100px

，但由于某些原因，某些单元格会自动生成比它们包含的

img

元素更宽的宽度

我只是想把每个

td

的宽度限制在它里面

img

的宽度上，这样每一行的宽度都是相同的，图像也会对齐

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

编辑：为了保护客户的隐私，我在这里使用占位符图像。我认为Gmail中这些图像之间出现的垂直“间隙”与表格的宽度不固定有关。这就是为什么我将

表格布局设置为固定的，并希望将每个
的大小调整为图像宽度，并将所有剩余的内容浮动可以解决问题

因为图像的高度和宽度都不同，所以要设置一个具有正确列间距和行间距的表格非常复杂（如果不是不可能的话）。最好设置多个表。我知道下面的代码并不完全完美，但我希望这能有所帮助。
如您所见，您可以省去所有的高度/宽度设置
<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>


桌子{
边界塌陷：塌陷；
背景色：#ddd；
}
运输署{
填充：0；
}
我不知道这是否符合您的要求，但为了对齐这些图像，我找到了造成较大td元素间隙的图像，并将其设置为宽度：100%（在您的示例中，似乎是将1px添加到td中）
正如您所看到的，奇怪的表格单元格宽度仍然存在，但它完全被图像填充，因此“马赛克”图像看起来不像马赛克

根据您当前的代码：
垂直右尺寸绿线是因为在第1行上，图像的宽度为600像素，而表格的宽度为601像素，尽管将表格宽度设置为600，因为下面的行是601像素
垂直居中的绿线是因为第2行第2列上的图像为152宽，而第3行下的图像为153宽
其余的线是601宽
下面的绿色线是因为您将桌子高度设置为192，而实际上是191
我说“你”做了这做了那，但也许这就是从photoshop生成的方式
 你似乎有7列，但从来没有说明每列有多宽，而且你的第一列似乎总是跨越2-这是必要的吗？首先，我要整理一下你的表格布局并简化它。然后对你的图片进行分类——其中一些图片的栏目已经满了。如果您对最终表格的外观有一个了解，那将是一个很大的帮助。我想说的是，从表格中删除所有width
属性，尤其是从tr元素中删除，然后放入7个宽度正确的col
元素。这个问题解决了吗？太多的内联样式。使代码更加混乱。请阅读详细信息：内联样式是必需的，因为这是Gmail和Outlook中的电子邮件签名