html-table - Outlook 2007/2010 中 float 表之间的水平间隙

标签 html-table css-float html-email outlook-2010 outlook-2007

我花了两周时间寻找解决方案,但没有找到。如果您在每个表格后 float 表格,则 Microsoft Outlook 2007/2010(使用 Microsoft Word 2007 HTML 渲染引擎)中将出现一个像素间隙:

enter image description here

我会感谢您提供任何有效的解决方案 - 这不是将表格分开 <td>

这里是重现它的 HTML 代码:

<html>
    <head>
    <title>Outlook 2007/2010 horizontal gap</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
        table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    </style>
</head>
<body bgcolor="#000000">
    <table bgcolor="#ffff00" align="left"><tr><td>&nbsp;</td></tr></table>
    <table bgcolor="#ffff00" align="left"><tr><td>&nbsp;</td></tr></table>
</body>
</html>

到目前为止我尝试过的:

  • display: inline-table;而不是align="left"
  • 搜索其他相关mso- CSS 属性没有运气
  • 删除了 <table> 之间的空格元素
  • border-collapse: collapseborder-spacing: 0
  • 添加border: 1px solid red;将消除间隙但增加表格的宽度
  • 其他display的,paddingmargin
  • rules 上不相关或已弃用的 html 属性( frameborder<td> 等)和/或 <table>

有趣因素:

如果将这两个表格放入一个表格中,额外间隙的宽度将增加到 2 个像素。

最佳答案

以下是如何 float 表格的示例。您需要结合使用 border="1"和 mso-table css 来消除 1px 间隙。请参阅示例:

<table bgcolor="#454545" width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td width="5%"></td><td align="center" width="95%">


<div align="left" style="float: left; padding: 0px; margin:0px;">
  <table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace: -1pt; mso-table-rspace: -1pt; ">
    <tr>
      <td width="318" bgcolor="959595">table 1

      </td>
    </tr>
  </table>
</div>
<div align="left" style="float: left; padding: 0px; margin:0px;">
  <table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace:-1pt; mso-table-rspace: -1pt; ">
    <tr>
      <td width="318" bgcolor="959595">table 2

      </td>
    </tr>
  </table>
</div>


</td></tr></table>

关于html-table - Outlook 2007/2010 中 float 表之间的水平间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10928380/

相关文章:

html - 右浮动容器导致换行

html - 带边框的容器内的 float 半径框

javascript - 响应式表格,嵌套表格单元格宽度可以继承

html - 用 HTML 表示舞台脚本的最佳方式是什么?

html - 列未完全跨越三列表

html - 电子邮件中的表格可以与另一个表格重叠吗?

html - 雅虎邮件和 Gmail 应用程序未在媒体查询中呈现高度属性

php - 根据第三表行显示来自两个组合表的数据

html - 如何将元素从左侧移动到右侧?

php - 获取该人刚刚写的实际电子邮件,不包括任何引用的文本