Question

我正在创建HTML简报，因此表格将是他们的方式。但是，当表格单元格中有少量文本时，我会遇到间隙问题。如何解决？

JSFIDDLE： http://jsfiddle.net/gakaLpqn/

<table width="350" border="0" cellpadding="0" cellspacing="0" style="width: 350px">
    <tr>
        <td rowspan="2" align="left" valign="top" style="color: #000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 18px; padding-right: 20px" text="#000"><img src="http://placehold.it/170" width="170" height="170"></td>
        <td align="left" valign="top" style="color: #000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; font-weight: bold; line-height: 18px; padding-bottom: 20px" text="#000">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
    </tr>
    <tr>
        <td align="left" valign="top" style="color: #000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 18px;" text="#000">When there is a small amount of text, the gap will be bigger. <br>
        </td>
    </tr>
</table>
<br>
<br>
<table width="350" border="0" cellpadding="0" cellspacing="0" style="width: 350px">
    <tr>
        <td rowspan="2" align="left" valign="top" style="color: #000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 18px; padding-right: 20px" text="#000"><img src="http://placehold.it/170"></td>
        <td align="left" valign="top" style="color: #000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; font-weight: bold; line-height: 18px; padding-bottom: 20px" text="#000">Vestibulum nec viverra nisi. Sed aliquet urna facilisis</td>
    </tr>
    <tr>
        <td align="left" valign="top" style="color: #000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 18px;" text="#000">Fusce nibh lorem, condimentum vitae maximus eget, vestibulum et nisl. Mauris neque massa, imperdiet vitae finibus vel, maximus nec quam. </td>
    </tr>
</table>

Answer 1

您可以像这样更改de markup：

<强> DEMO

＆＃13;

<table width="350" border="0" cellpadding="0" cellspacing="0" style="width: 350px">
    <tr>
        <td align="left" valign="top" style="padding-right: 20px">
            <img src="http://placehold.it/170" width="170" height="170" />
        </td>
        <td align="left" valign="top" style="color: #000; font-family: Tahoma, Arial, sans-serif; font-size: 12px;"> 
            <div style="font-weight: bold; line-height: 18px; padding-bottom: 20px" text="#000">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
            <div style="font-weight: normal; line-height: 18px;" text="#000">When there is a small amount of text, the gap will be bigger.</div>
        </td>
    </tr>
</table>
<br>
<br>
<table width="350" border="0" cellpadding="0" cellspacing="0" style="width: 350px">
    <tr>
        <td align="left" valign="top" style="padding-right: 20px">
            <img src="http://placehold.it/170" />
        </td>
        <td align="left" valign="top" style="color: #000; font-family: Tahoma, Arial, sans-serif; font-size: 12px;line-height: 18px;">
            <div style="font-weight: bold; padding-bottom: 20px">Vestibulum nec viverra nisi. Sed aliquet urna facilisis</div>
            <div style="font-weight: normal;">Fusce nibh lorem, condimentum vitae maximus eget, vestibulum et nisl. Mauris neque massa, imperdiet vitae finibus vel, maximus nec quam.</div>
        </td>
    </tr>
</table>

＆＃13;

修改

我也简化了标记和样式。

Answer 2

如果您的标题长度一致，则可以使用固定高度作为标题行并删除填充，因此在每种情况下，您的正文都将在标题下方。

Answer 3

你确实以错误的方式封装了tr和td。也许试试这个：http://jsfiddle.net/gakaLpqn/3/

<table width="350" border="0" cellpadding="0" cellspacing="0" style="width: 350px">
    <tr>
        <td rowspan="2" align="left" valign="top" style="color: #000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 18px; padding-right: 20px" text="#000"><img src="http://placehold.it/170" width="170" height="170"></td>
            <td align="left" valign="top" style="color: #000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; line-height: 18px; padding-bottom: 20px" text="#000"><div style="font-weight:bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
           <div >When there is a small amount of text, the gap will be bigger. <br></div>
                </td>
    </tr>
</table>
<br>
<br>
<table width="350" border="0" cellpadding="0" cellspacing="0" style="width: 350px">
    <tr>
        <td rowspan="2" align="left" valign="top" style="color: #000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 18px; padding-right: 20px" text="#000"><img src="http://placehold.it/170"></td>
        <td align="left" valign="top" style="color: #000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; line-height: 18px; padding-bottom: 20px" text="#000"><div style="font-weight:bold">Vestibulum nec viverra nisi. Sed aliquet urna facilisis</div>
            <div > Fusce nibh lorem, condimentum vitae maximus eget, vestibulum et nisl. Mauris neque massa, imperdiet vitae finibus vel, maximus nec quam.</div >
            </td>
    </tr>
</table>

HTML / CSS - 表格单元格中文本之间的差距

3 个答案: