Table 单元格使用的宽度比它需要的多得多

Question

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

代码现在看起来不太好，因为我一直在尝试一切，只是为了让它工作。任何人都可以帮助我吗？

<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

从您 fiddle 的表情来看，这是意料之中的事情。您使用的是 table 布局，这意味着同一列中的所有单元格将具有相同的宽度，同一行中的所有单元格将具有相同的高度。我的直接建议是放弃 table 布局并使用 semantic elements.

如果您坚持使用 table 布局，则需要了解单元格上的 colspan and rowspan 属性以及它们如何影响您的布局。

Answer 2

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

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

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

希望对您有所帮助。

Answer 3

将 display:inline 放在 <tr> 中您有图标 + 文字的地方。

http://jsfiddle.net/zg0zrx3v/

Table 单元格使用的宽度比它需要的多得多

Table cell uses a lot more width then it needs

html

css

html-table

newsletter