Первый td растягивается на всю ширину, почему?

Question

[bazliiii]

Добрый вечер, верстаю письмо и возникла проблема, что первое td растягиваться на всю ширину, а остальные прижимаются к противоположному краю и не имеют отступов, так же если td пустое, но с атрибутом width оно не отображаться
Вот код:

<table style="border-collapse: collapse; overflow: hidden;" cellpadding="0" cellspacing="0"
                                width="100%" align="center" bgcolor="#B72025">
                                <tr>
                                    <td height="32px" width="100%"></td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 20px;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="180" height="29"
                                            viewBox="0 0 180 29" fill="none">
                                            <g clip-path="url(#clip0_3_24)">
                                                <path
                                                    d="M13.7848 -0.00012207H-0.000305176V28.4515H6.19804V20.7417V6.21745H13.7352C18.1485 6.21745 21.7187 9.79877 21.7187 14.2257C21.7187 18.6526 18.1485 22.2339 13.7352 22.2339H12.446L6.24763 28.4515H13.7848C21.6195 28.4515 27.9666 22.0847 27.9666 14.2257C27.9171 6.36667 21.5699 -0.00012207 13.7848 -0.00012207Z"
                                                    fill="white" />
                                                <path
                                                    d="M69.7176 9.65045V22.2348H66.4448V20.4939C65.5523 21.7872 64.3126 22.4835 62.5771 22.4835C59.8002 22.4835 58.1143 20.5934 58.1143 17.5095V9.65045H61.387V16.8131C61.387 18.4545 61.982 19.3499 63.668 19.3499C65.4531 19.3499 66.4448 18.2556 66.4448 16.2162V9.65045H69.7176Z"
                                                    fill="white" />
                                                <path
                                                    d="M80.18 9.45162V12.7842C79.932 12.7842 79.7337 12.7345 79.3866 12.7345C77.304 12.7345 75.5188 13.6298 75.5188 16.6143V22.1852H72.2461V9.65059H75.5188V11.8392C76.3122 10.1977 77.6511 9.35214 79.4362 9.35214C79.7337 9.40188 79.9816 9.40188 80.18 9.45162Z"
                                                    fill="white" />
                                                <path
                                                    d="M81.6163 15.9675C81.6163 12.2369 84.3932 9.4017 88.1618 9.4017C91.2361 9.4017 93.9138 11.2421 94.4097 14.4255H91.0874C90.6907 13.0328 89.5006 12.3861 88.2114 12.3861C86.2279 12.3861 84.9386 13.8286 84.9882 15.9177C84.9882 18.0068 86.2775 19.4493 88.2114 19.4493C89.5502 19.4493 90.7403 18.7529 91.137 17.4099H94.4593C93.9634 20.7425 91.1866 22.4835 88.2114 22.4835C84.3932 22.4835 81.6163 19.6483 81.6163 15.9675Z"
                                                    fill="white" />
                                                <path
                                                    d="M108.246 14.3264V22.1854H104.974V15.0725C104.974 13.4311 104.329 12.5358 102.643 12.5358C100.808 12.5358 99.8662 13.6301 99.8662 15.6694V22.2849H96.5935V4.62701H99.8662V11.342C100.759 10.0487 102.048 9.35237 103.784 9.35237C106.56 9.40211 108.246 11.2923 108.246 14.3264Z"
                                                    fill="white" />
                                                <path
                                                    d="M123.519 4.62701V22.2352H120.246V20.544C119.403 21.7378 118.064 22.4839 116.329 22.4839C113.056 22.4839 110.626 19.7979 110.626 15.9181C110.626 12.0384 113.106 9.35237 116.329 9.35237C118.114 9.35237 119.403 10.198 120.296 11.3917V4.62701H123.519ZM120.246 15.9679C120.246 13.9285 118.858 12.5358 117.023 12.5358C115.188 12.5358 113.849 13.9285 113.849 15.9679C113.849 18.057 115.238 19.4 117.023 19.4C118.858 19.4 120.246 18.0072 120.246 15.9679Z"
                                                    fill="white" />
                                                <path
                                                    d="M138.744 9.65059V22.235H135.471V20.5438C134.628 21.7375 133.289 22.4837 131.554 22.4837C128.281 22.4837 125.851 19.7977 125.851 15.9179C125.851 12.0381 128.33 9.35214 131.554 9.35214C133.339 9.35214 134.628 10.1977 135.52 11.3915V9.65059H138.744ZM135.471 15.9676C135.471 13.9283 134.082 12.5355 132.248 12.5355C130.413 12.5355 129.074 13.9283 129.074 15.9676C129.074 18.0567 130.463 19.3997 132.248 19.3997C134.082 19.3997 135.471 18.007 135.471 15.9676Z"
                                                    fill="white" />
                                                <path
                                                    d="M141.023 15.9675C141.023 12.2369 143.8 9.4017 147.568 9.4017C150.643 9.4017 153.32 11.2421 153.816 14.4255H150.494C150.097 13.0328 148.907 12.3861 147.618 12.3861C145.634 12.3861 144.345 13.8286 144.395 15.9177C144.395 18.0068 145.684 19.4493 147.618 19.4493C148.957 19.4493 150.147 18.7529 150.543 17.4099H153.866C153.37 20.7425 150.593 22.4835 147.618 22.4835C143.8 22.4835 141.023 19.6483 141.023 15.9675Z"
                                                    fill="white" />
                                                <path
                                                    d="M167.654 14.3264V22.1854H164.381V15.0725C164.381 13.4311 163.736 12.5358 162.05 12.5358C160.216 12.5358 159.274 13.6301 159.274 15.6694V22.2849H156.001V4.62701H159.274V11.342C160.166 10.0487 161.455 9.35237 163.191 9.35237C165.968 9.40211 167.654 11.2923 167.654 14.3264Z"
                                                    fill="white" />
                                                <path
                                                    d="M179.999 21.4888C179.305 21.9364 177.768 22.4836 176.28 22.4836C173.751 22.4836 171.569 20.9914 171.569 17.3603V12.7344H169.338V9.65052H171.569V6.96453L174.842 6.26816V9.70026H179.503V12.7842H174.842V17.2608C174.842 18.753 175.536 19.4992 176.825 19.4992C177.569 19.4992 178.412 19.2505 179.453 18.9023L179.999 21.4888Z"
                                                    fill="white" />
                                                <path
                                                    d="M48.0487 6.2684H40.3627V22.1356H43.8338V17.8082V9.7005H48.0487C50.4784 9.7005 52.5115 11.6901 52.5115 14.1772C52.5115 16.6642 50.528 18.6538 48.0487 18.6538H47.3049L43.8338 22.1356H48.0487C52.4123 22.1356 55.9826 18.5543 55.9826 14.1772C55.9826 9.84972 52.4123 6.2684 48.0487 6.2684Z"
                                                    fill="white" />
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_3_24">
                                                    <rect width="180" height="28.4516" fill="white" />
                                                </clipPath>
                                            </defs>
                                        </svg>
                                    </td>
                                    <td></td>
                                    <td>
                                        <a style="display: block; width: 100%; text-align: center;color: #fff; text-decoration: none; white-space: nowrap;"
                                            href="#" class="header__link">[e-mail]</a>
                                        <a style="display: block; width: 100%; padding-top: 5px;  text-align: center; color: #fff; text-decoration: none; white-space: nowrap;"
                                            href="#" class="header__link">06155 - 8979269</a>
                                        <a style="display: block; width: 100%; padding-top: 5px; color: #fff; text-align: center; text-decoration: none; white-space: nowrap;"
                                            href="#" class="header__link">durchdacht.de</a>
                                    </td>
                                    <td></td>
                                    <td>
                                        <img class="header__link" src="https://i.imgur.com/j51HNQB.png" alt="google" /> 
                                    </td>
                                </tr>
                                <tr>
                                    <td height="50px" width="100%"></td>
                                </tr>
                        </td>
                    </tr>
                </table>

Comments

[drtvader]

Некоторые клиенты не любят svg, не отображают.
Был кейс когда svg в img не отображались в Яндексе.

Answer 1

[Николай Шабалин]

Таблицы должны иметь одинаковое количество ячеек в каждом ряду.

1 1 1
1 1 1
1 1 1

Если какой-то ячейки нет в ряду, то вы должны растнуть ячейку на две

1 1 1
2   1
1 1 1

Если в ряду вообще одна ячейка из трёх, тогда нужно растянуть на 3 ячейки

1 1 1
2   1
3

В вашем случае нужно заменить первый и последний ряды с

<tr>
  <td height="50px" width="100%"></td>
</tr>

на

<tr>
  <td height="50px" colspan="5"></td>
</tr>

5 — потому что у вас 5 ячеек в втором ряду. Ячейкам во втором ряду вы уже можете указать конкретные ширины

Comments

[bazliiii]

Спасибо, понял!