删除表格行之间的间距
[英]Remove spacing between table rows
问题描述
I've looked through many of the similarly titled questions regarding this issue, and tried many of the accepted answers but am still getting the unwanted row spaces. 
我浏览了有关此问题的许多类似标题的问题，并尝试了许多已接受的答案，但仍然会得到不需要的行空间。 Like many of the questions, I'm making an email template so I have to use nested tables to get not only the structure I want, but for it to render properly in email. 像许多问题一样，我正在制作电子邮件模板，因此我必须使用嵌套表不仅获得所需的结构，而且还需要使其正确地在电子邮件中呈现。
The solutions I've tried that have not worked: 我尝试过的解决方案不起作用：
- cellspacing = 0 cellspacing = 0
- cellpading = 0 cellpading = 0
- border-collapse: collapse 边界崩溃：崩溃
- border-spacing: 0 边框间距：0
- margin: 0 0 0 0 保证金：0 0 0 0
- style="display: block" for my image 我的图片的样式为“ display：block”
None of these seem to even make a difference, I can't get rid of the row spaces. 这些似乎都没有改变，我无法摆脱行空间。 This happens in Chrome/IE/Firefox. 这发生在Chrome / IE / Firefox中。
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>
Title
</title>
<style type="text/css">
a:hover { text-decoration: none !important; }
.header h1 {color: #055d90; font: normal 25px Georgia, Times, serif; margin: 0; font-weight: bold; padding: 0 0 0px 0; line-height: 39px; margin-top: 0;}
.header p {color: #cf373e; font: normal 17px Georgia, Times, serif; margin: 0; padding: 0; line-height: 12px; font-style: italic;}
.custinfo h1 {color: #FFFFFF; font: normal 25px Tahoma, Times, serif; background-color: #FF8000; padding: 10px 0 10px 0;}
.custinfo h2 {color: #FFFFFF; font: normal 15px Tahoma, Times, serif; background-color: #707070; padding: 0 0 0 0;}
.table {border-collapse: collapse;}
.table td {margin: 0; padding: 0; display:block;}
</style>
</head>
<body style="margin: 0; padding: 0;">
<table align="left" width="100%" class="table">
<tr>
<!--header-->
<table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0; margin-top: 0;">
<tr>
<td valign="top">
<img src="images/logo.gif" style="display: block; border: 0" alt="" width="200" height="100">
</td>
</tr>
<tr>
<td valign="top" align="middle" class="header" width="100%">
<h1>Order</h1>
</td>
</tr>
</table>
<table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0;">
<tr class="custinfo">
<td width="50%">
<h1>[DISTRIBUTOR NAME]</h1>
</td>
<td align="middle">
<h1>[ORDER DATE]</h1>
</td>
</tr>
</table>
<table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0;">
<tr class="custinfo">
<td>
<h2>PO# [PO NUMBER]</h2>
</td>
<td >
<h2>Customer [COMPANY NAME]</h2>
</td>
<td >
<h2>Total Order [TOTAL ORDER]</h2>
</td>
</tr>
<tr class="custinfo" style="margin:0">
<td>
<h2>PO# [PO NUMBER]</h2>
</td>
<td>
<h2>Customer [COMPANY NAME]</h2>
</td>
<td>
<h2>Total Order [TOTAL ORDER]</h2>
</td>
</tr>
</table>
</tr>
</table>
</body>
</html>
2 个解决方案
解决方案1
4 已采纳 2015-04-14 15:12:37
You should prevent h1 , h2 elements from margin collapsing. 您应该防止h1 ， h2元素的边距崩溃。
h1, h2 {
margin: 0;
}
a:hover { text-decoration: none !important; } .header h1 { color: #055d90; font: normal 25px Georgia, Times, serif; margin: 0; font-weight: bold; padding: 0 0 0px 0; line-height: 39px; margin-top: 0; } .header p { color: #cf373e; font: normal 17px Georgia, Times, serif; margin: 0; padding: 0; line-height: 12px; font-style: italic; } .custinfo h1 { color: #FFFFFF; font: normal 25px Tahoma, Times, serif; background-color: #FF8000; padding: 10px 0 10px 0; } .custinfo h2 { color: #FFFFFF; font: normal 15px Tahoma, Times, serif; background-color: #707070; padding: 0 0 0 0; } .table { border-collapse: collapse; } .table td { margin: 0; padding: 0; display: block; } h1, h2 { margin: 0; }
<table align="left" width="100%" class="table"> <tr> <!--header--> <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0; margin-top: 0;"> <tr> <td valign="top"> <img src="images/logo.gif" style="display: block; border: 0" alt="" width="200" height="100"> </td> </tr> <tr> <td valign="top" align="middle" class="header" width="100%"> <h1>Order</h1> </td> </tr> </table> <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0;"> <tr class="custinfo"> <td width="50%"> <h1>[DISTRIBUTOR NAME]</h1> </td> <td align="middle"> <h1>[ORDER DATE]</h1> </td> </tr> </table> <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0;"> <tr class="custinfo"> <td> <h2>PO# [PO NUMBER]</h2> </td> <td> <h2>Customer [COMPANY NAME]</h2> </td> <td> <h2>Total Order [TOTAL ORDER]</h2> </td> </tr> <tr class="custinfo" style="margin:0"> <td> <h2>PO# [PO NUMBER]</h2> </td> <td> <h2>Customer [COMPANY NAME]</h2> </td> <td> <h2>Total Order [TOTAL ORDER]</h2> </td> </tr> </table>
Reference: Margin collapsing 参考： 保证金崩溃
解决方案2
1 2015-04-14 15:13:24
Add margin: 0 to your h2. 将保证金：0增加到h2。 If you not define margin 0 the margin comes default with user agent stylesheets. 如果未定义边距0，则用户代理样式表将默认使用边距。
JSFiddle Link JSFiddle链接
https://jsfiddle.net/aLast0qs/
Css code CSS代码
.custinfo h2 {
color: #FFFFFF;
font: normal 15px Tahoma, Times, serif;
background-color: #707070;
padding: 0 0 0 0;
margin: 0;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
删除HTML电子邮件中表格行之间的间距 - Remove spacing between table rows in HTML email
删除行之间的客户端表间距 - remove client table spacing between rows
在行之间的html表中间距 - Spacing in a html table between rows
HTML-表中行之间的间距 - HTML - Spacing between rows in table
增加表格行之间的间距 - Increasing the spacing between table rows
在表格行之间添加间距 - Add Spacing between table rows
HTML表格中2行之间的间距 - Spacing between 2 Rows in a HTML table
删除HTML表格行和列之间的间距 - Removing spacing between HTML table rows and columns
调整HTML表格行之间的间距 - Adjust spacing between HTML table rows
HTML 表格需要列间距，而不是行间距 - HTML table needs spacing between columns, not rows
相关标签