为什么我的 <td> 块的宽度大于 50px。如果我特别告诉它是最大宽度和宽度 = 50px答案

【问题标题】：Why is the width of my <td> block bigger than 50px. If I specifically tell it to be max-width and width = 50px为什么我的 <td> 块的宽度大于 50px。如果我特别告诉它是最大宽度和宽度 = 50px
【发布时间】：2019-06-23 21:19:03
【问题描述】：

这是我的桌子：

<table style="width: 84%; min-width: 330px; margin-left: 8%; margin-top: 20px; margin-right: 8%;" cellpadding="0" cellspacing="0">
                    
                    <tr>
                        <td style="width: 50px; border-top: solid 1px #dedede; background: yellow; max-width: 50px;">
                            <img style="width: 50px; background: red" src="https://s3.amazonaws.com/co.psngr.gopublic.staging/media/product/1/fbb3f543c5c349b09b59bf19a1e6a6d9.png">
                        </td>
                        <td colspan="1" style="border-top: solid 1px #dedede; padding: 20px 10px; text-align: left; word-wrap: break-word; font-family: 'Lato', sans-serif; font-size: 16px;color: #333333; width: 50%;">
                            <b><span style="color: #24b646">3 x </span>Psngr Beacon</b><br/>
                            <span style="font-size: 14px; color: #899ba7;">Bluetooth 4 (BLE) USB iBeacon\u2122</span>
                        </td>
                        <td style="
                          width: 100px;
                          text-align: right;
                          border-top: solid 1px #dedede;
                          padding: 20px 0px;
                          font-weight: bold; color: #24b646;
                          font-family: 'Lato', sans-serif;
                          font-size: 18px;
                          letter-spacing: 0.2px; word-wrap: break-word">
                            € 74.85
                        </td>
                    </tr>
                </table>

如您所见。表格里面有一张 50px 的图片，用红色着色。但是然后是图片的两倍大，甚至认为两者都设置了相同的宽度：

当我检查时，元素样式显示为 50px；但如果我突出显示它，它会显示 109x77

我将它用于 django 模板，所以我不能使用 @mediaQueries 或类。我只是想提前让你们知道这件事

【问题讨论】：

这就是表格单元格的工作方式。也许不要在这里使用桌子？另外，您是否尝试在您的<table> 上设置table-layout:fixed;？

标签： html css html-table django-templates email-client

【解决方案1】：

我认为这是因为您将中间 td 的宽度设置为 50%，所以它会更改第一个 td 的宽度以占用表格行的剩余空间。将第二个 td 的宽度设置为 100% 应该可以解决这个问题。

【讨论】：

【解决方案2】：

这是由其他两个 td 元素上的某些样式引起的。由于您在其他两个上有padding-top 和/或padding-bottom，因此在第一个上创建了您不想要的额外垂直空间。此外，您最初将第二个 td 的宽度设置为 50%：这会将第一个 td 拉到大于 50 像素。

我在下面的 sn-p 中将这些东西作为起点 - 您可以通过不同方式对其他 2 个td 进行调整，以使第一个不会产生不良影响。

<table style="width: 84%; min-width: 330px; margin-left: 8%; margin-top: 20px; margin-right: 8%;" cellpadding="0" cellspacing="0">

                <tr>
                    <td style="width: 50px; border-top: solid 1px #dedede; background: yellow; max-width: 50px;">
                        <img style="width: 50px; background: red" src="https://s3.amazonaws.com/co.psngr.gopublic.staging/media/product/1/fbb3f543c5c349b09b59bf19a1e6a6d9.png">
                    </td>
                    <td style="border-top: solid 1px #dedede; text-align: left; word-wrap: break-word; font-family: 'Lato', sans-serif; font-size: 16px;color: #333333; padding: 0 40px">
                        <b><span style="color: #24b646">3 x </span>Psngr Beacon</b><br/>
                        <span style="font-size: 14px; color: #899ba7;">Bluetooth 4 (BLE) USB iBeacon\u2122</span>
                    </td>
                    <td style="
                      text-align: right;
                      border-top: solid 1px #dedede;
                      font-weight: bold; color: #24b646;
                      font-family: 'Lato', sans-serif;
                      font-size: 18px;
                      letter-spacing: 0.2px; word-wrap: break-word">
                        € 74.85
                    </td>
                </tr>
            </table>

【讨论】：