如何删除表中的行和列之间的不需要的空间？
如何删除表格中行和列之间的多余空间。
我试着改变表格，tr和td上的边距，填充和各种边界属性。
我希望所有的照片都彼此相邻，看起来像一个大的形象。
我应该如何解决这个问题？
CSS
table { border-collapse: collapse; } HTML
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Tera Byte Video Game Creation Camp</title> <link rel="stylesheet" type="text/css" href="style.css"></link> </head> <body> <table class="mytable" align="center"> <tr class="header"> <td colspan="3"><img src="images/home_01.png" /></td> </tr> <tr class="top"> <td colspan="3"><img src="images/home_02.png" /></td> </tr> <tr class="link-row"> <td><img src="images/home_03.png" /></td> <td><img src="images/home_04.png" /></td> <td><img src="images/home_05.png" /></td> </tr> <tr class="link-row"> <td><img src="images/home_07.png" /></td> <td><img src="images/home_06.png" /></td> <td><img src="images/home_08.png" /></td> </tr> <tr class="link-row"> <td><img src="images/home_09.png" /></td> <td><img src="images/home_10.png" /></td> <td><img src="images/home_11.png" /></td> </tr> <tr class="link-row"> <td><img src="images/home_12.png" /></td> <td><img src="images/home_13.png" /></td> <td><img src="images/home_14.png" /></td> </tr> <tr class="bottom"> <td colspan="3"><img src="images/home_15.png" /></td> </tr> </table> </body> </html>
添加这个CSS重置到您的CSS代码:( 从这里 ）
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
它将有效地重置CSS，摆脱填充和边距。
添加到vectran的答案：您还必须在表元素上设置cellspacing属性以实现跨浏览器兼容性。
<table cellspacing="0">
编辑（为了完整起见，我扩大这5年后:)：
Internet Explorer 6和Internet Explorer 7要求您直接将表空间设置为表属性，否则间距不会消失。
Internet Explorer 8及更高版本和所有其他版本的stream行浏览器（ Chrome，Firefox，Opera 4+ ）都支持CSS属性border-spacing 。
所以为了让跨浏览器的表格单元格间隔重置（支持IE6作为恐龙浏览器），你可以按照下面的代码示例：
table{ border: 1px solid black; } table td { border: 1px solid black; /* Style just to show the table cell boundaries */ } table.no-spacing { border-spacing:0; /* Removes the cell spacing via CSS */ border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */ }
<p>Default table:</p> <table> <tr> <td>First cell</td> <td>Second cell</td> </tr> </table> <p>Removed spacing:</p> <table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 --> <tr> <td>First cell</td> <td>Second cell</td> </tr> </table>
这对我工作：
#table { border-collapse: collapse; border-spacing: 0; }
对于td中的图像，将其用于图像：
display: block;
这为我删除了不必要的空间
table { border-collapse: collapse; }
将折叠分隔表格列的所有边界…
或尝试
<table cellspacing="0" style="border-spacing: 0;">
做所有单元格间距为0和边界间距为0来实现相同。
玩得开心！
对于符合标准的HTML5，添加所有这些CSS来删除表中的图像之间的所有空间：
table { border-spacing: 0; border-collapse: collapse; } td { padding:0px; } td img { display:block; }
只要加上雅各布的答案，对于img在td ，
body {line-height: 0;} img {display: block; vertical-align: bottom;}
这适用于大多数电子邮件客户端，包括Gmail。 但不是outlook。 对于outlook，你需要多做两件事：
table {border-collapse: collapse;}
并将每个td元素设置为与其包含的图像具有相同的height和width 。 例如，
<td width="600" height="80" style="line-height: 80px;"> <img height="80" src="http://www.website.comhttp://img.dovov.comNature_01.jpg" width="600" /> </td>
设置Cellpadding和cellspacing为0将删除行和列之间的不必要的空间…
尝试这个，
table{ border-collapse: collapse; /* 'cellspacing' equivalent */ } table td, table th{ padding: 0; /* 'cellpadding' equivalent */ }
将这一行添加到文件的开头为我工作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
修改CSS来设置适当的边框属性不起作用，直到我添加上面的行
你有没有尝试删除有一个colspan的TR，看看它是否改变了什么？
当涉及到精确的餐桌devise时，我曾经遇到过集体食物和餐桌装饰。 如果你的图像看起来没有colspan-TR，那么我会从那里开始build立一个嵌套的表格。
此外你的style.css似乎不完整，也许有什么问题吗？ 我会至less添加padding: 0; margin: 0; padding: 0; margin: 0; 到桌子（或“mytable”类）。 确保您的图片没有空格和/或边框（例如，将img { border: 0; }到样式表中）。
