html - 表格单元格使用的宽度比它需要的要多得多

Question

我正在设计一个新闻稿模板，但我遇到了一个问题，该表格在同一行中包含图形和文本。出于某种原因，图形将文本一直推到右边。我希望文本与图标“连接”/左对齐，因为模板最多使用 3 个图标集(图标 + 文本)。

https://jsfiddle.net/o1dLoxa8/

代码现在看起来不太好，因为我一直在尝试一切，只是为了让它工作。谁能帮帮我？

<table border="0" cellpadding="0" cellspacing="0" class="salesListText">        
    <tr>
        <td align="left" valign="middle" class="saleslistIcon"> 
            <img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/billetterL.png" alt="" height="28" width="28" />
        </td>           
        <td align="left" valign="middle" class="saleslistIconText"> 
            Billetter       
        </td>               
    </tr>                   
    <tr>            
        <td valign="baseline" colspan="3">  
            <h2>Kaptein Sabeltann - Kun forestillingen</h2>             
            (Kan kombineres med parkbilletter og/eller overnatting)     
        </td>
    </tr>
    <tr>
        <td valign="baseline">  
            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="salesListSpec">
                <tr>
                    <td valign="baseline" colspan="3">
                        <h4>Pakken inneholder:</h4>
                        - Billetter til forestillingen
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left" valign="top" class="saleslistPrice" colspan="3">
            <h2 style="color:#E3178A;"><span>Pris fra&nbsp;</span>240,-</h2>
        </td>
    </tr>
</table>

.saleslistIcon{padding-right:10px;}
.saleslistIconText{color:#B4B4B4; font-size:12px; padding-right:8px;}
.salesListText{width:100%;}
.salesListSpec{padding-top:10px; line-height:170%; display:block;}
h2 span{font-size:16px; font-weight:normal; color:#444444;}

Answer 1

您有一个包含三列的表格；但是您将图像(小)和正文(大)塞在同一列 (0) 中。这会将第 2 列和第 3 列向右推。

尝试将 border="1" 放入您的 table 定义中以了解我的意思。

我建议您使用外部表来创建您的行并且只有一个 TD。然后在每个 TD 内嵌入辅助表以进行复杂的布局。我假设是一封电子邮件通讯，因此请将您的 CSS 保持在最低限度或将其内联而不是单独的样式部分。许多电子邮件提供商不能很好地使用 CSS。

希望对您有所帮助。