我花了两周时间寻找解决方案,但没有找到。如果您在每个表格后 float 表格,则 Microsoft Outlook 2007/2010(使用 Microsoft Word 2007 HTML 渲染引擎)中将出现一个像素间隙:
我会感谢您提供任何有效的解决方案 - 这不是将表格分开 <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> </td></tr></table>
<table bgcolor="#ffff00" align="left"><tr><td> </td></tr></table>
</body>
</html>
到目前为止我尝试过的:
-
display: inline-table;
而不是align="left"
- 搜索其他相关
mso-
CSS 属性没有运气 - 删除了
<table>
之间的空格元素 -
border-collapse: collapse
和border-spacing: 0
- 添加
border: 1px solid red;
将消除间隙但增加表格的宽度 - 其他
display
的,padding
和margin
rules
上不相关或已弃用的 html 属性(frame
、border
、<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/