【问题标题】:table cells have too much space between them表格单元格之间的空间太大
【发布时间】:2014-08-23 02:04:01
【问题描述】:

好的,所以我对这张表有几个问题。我需要它看起来尽可能地输给这个:

但是,当我尝试实现这一点时,最终会在包含文本的表格单元格之间留出大量空间,并且由于某种原因 valign="top" 不起作用,文本的垂直对齐:中间也不起作用部分,因此它们不会与图像的顶部对齐。这就是它现在的样子:http://imgur.com/KKIGrhQ

不知道如何解决这个问题或让它看起来像原来的样子。 :(请帮忙!提前致谢!!!

<table width="570" align="center" style="padding-top:10px; background-color:#FFF; border-top:dotted 1px #000;">
 <tr>
 <td width="190" valign="top">
  <img src="images/plant.jpg" />
 </td>
<td width="199" valign="top" style="vertical-align:top;">
<p style="font-size:14px; color:#646f9a; line-height:15px;">DEFYING THE RECESSION<br>
<span style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;"><strong>Sarah Walker</strong>, CNNMoney.com staff writer</span></p>
<p style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;">When metal worker Ken Kash was laid off in July from his job at a theatre set company, he decided not to look for another full-time position. Instead, he's pursing a <span style="text-decoration:underline;">longtime dream</span>: launching his own company.</p>
<p style="font-size:11px; color:#646f9a;">STRATEGIC <strong>INVESTMENT</strong> <span style="color:#c0d84d;">&bull;</span></p>
 </td>
 <td width="121" valign="top" rowspan="1" style="background-color:#eff2d9; border-bottom:solid #c0d84d 8px; padding-left:10px; padding-right:10px; padding-top:2px;">
 <p style="font-size:14px; color:#646f9a; line-height:15px;">ASK AN EXPERT</p>
 <p style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;"><strong>Q: Is there anything in this massive federal economic stimulus plan for small business? <br>
 — Rick<br><br>

 A: Yes, lots.</strong><br><br>

  There is going to be a lot of federal, state and local money available. Get ready to take advantage of it. <span style="text-decoration:underline;">Read more...</span></p>
 <p style="font-size:11px; color:#646f9a;">ASK THE <strong>EXPERT</strong> <span style="color:#c0d84d;">&bull;</span></p>
 </td>
 </tr>
 <tr>
 <td valign="top" style="vertical-align:top;"><img src="images/video.jpg" />
 </td>
 <td valign="top" style="vertical-align:top;">
 <p style="font-size:14px; color:#646f9a; line-height:15px;">DEFYING THE RECESSION<br>
 <span style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;"><strong>Sarah Walker</strong>, CNNMoney.com staff writer</span></p>
 <p style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;">When metal worker Ken Kash was laid off in July from his job at a theatre set company, he decided not to look for another full-time position. Instead, he's pursing a <span style="text-decoration:underline;">longtime dream</span>: launching his own company.</p>
 <p style="font-size:11px; color:#646f9a;">STRATEGIC <strong>INVESTMENT</strong> <span style="color:#c0d84d;">&bull;</span></p>
</td>
<td rowspan="2">&nbsp;</td>
 </tr>
 </table>

【问题讨论】:

  • 您不应该为此使用表格。使用 flexbox、float 或 inline-block(谷歌它们)。
  • 使用 CSS 类。 Rowspan 设置为 1。将其翻倍。
  • 抱歉,我应该提到这是用于电子邮件的,因此必须使用表格,因为 div 等无法在 ESP 中正确显示。

标签: html css html-table


【解决方案1】:

您不应该为此使用表格。尝试 twitter bootstrap 或 960 Gs 或 sny 其他 css 网格系统。

【讨论】:

  • 抱歉,我应该提到这是用于电子邮件的,因此必须使用表格,因为 div 等无法在 ESP 中正确显示。