尽管尺寸固定,TD Rowspan仍会增加像素

时间:2019-12-18 15:53:04

标签: html css html-table

我注意到chrome出现了一个奇怪的问题。出于测试新闻通讯的目的,我只能使用表的模板创建一个模板。

测试URL在这里:https://colorfill.pl/dev2/

完整代码如下:

<!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Enfamil Premium 2 MFGM</title>
        <style type="text/css">
        img {
            display:block;
        }
        body {
            padding:0;
            margin:0;
            background:red;
        }
        #enfamil_newsletter {
            margin:0 auto;
        }
        #enfamil_newsletter, #enfamil_newsletter tbody, #enfamil_newsletter thead, #enfamil_newsletter tfoot, #enfamil_newsletter tr td, #enfamil_newsletter tr th, #enfamil_newsletter .nested, #enfamil_newsletter .nested tbody, #enfamil_newsletter .nested thead, #enfamil_newsletter .nested tfoot, #enfamil_newsletter .nested tr td, #enfamil_newsletter .nested tr th {
            text-align:center;
            border-collapse: collapse;
            border:0;
            border-spacing:0;
            padding:0;
        }      
        </style>
    </head>
    <body>
    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" id="enfamil_newsletter">
        <tr>
            <th  width="600" height="136">
                <img src="img1.jpg" alt="Enfamil Premium 2 MFGM - Logo" style="width:600px;height:136px;" border="0" />
            </th>
        </tr>
        <tr>
            <td width="600" height="141">
                <img src="img2.jpg" alt="Odbierz prezent - dołącz do Klubu Enfamama" style="width:600px;height:141px;" border="0" />
            </td>
        </tr>
        <tr>
            <td>
                <table class="nested">
                    <tr>
                      <td rowspan="3" width="363" height="274">
                        <img src="img3.jpg" alt="Klub Enfamama" border="0" style="width:363px;height:274px;" />
                    </td>
                      <td width="237" height="106">
                        <img src="img4.jpg" alt="Klub Enfamama" border="0" style="width:237px;height:106px;" />
                    </td>
                    </tr>
                    <tr>
                      <td width="237" height="46">
                        <a href="https://www.enfamil.pl/pages/klub-enfamama" title="Zapisz się do klubu" target="_blank">
                            <img src="img5.jpg" alt="Klub Enfamama - Zapisz się" style="width:237px;height:46px;" border="0" />
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td width="237" height="122">
                        <img src="img6.jpg" alt="Klub Enfamama" border="0" style="width:237px;height:122px;" />
                      </td>
                    </tr>
                </table>             
            </td>
        </tr>
        <tr>
            <td width="600" height="49">
                <img src="img7.jpg" alt="Ważne informacje" style="width:600px;height:49px;" border="0" />
            </td>
        </tr>
    </table>
    </body>
</html>

问题?很好,即使我的行跨TD应该具有确切的大小(宽度=“ 363”高度=“ 274”),它的实际大小也较大,逗号后只有几px。这会破坏布局。为什么会这样?

0 个答案:

没有答案