如何删除表中的行和列之间的不需要的空间？

138

我试着改变表格和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>

来源

2010-02-17 Zach Galant

这个CSS复位添加到您的CSS代码：（From here）

/* 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，摆脱填充和边距。

来源

2010-02-17 09:26:25 vectran

感谢。那工作。 – 2010-02-17 09:32:15

+12

有一条评论，如果你看到： /*表格仍然需要'cellspacing =“0”'在标记*/ – easwee 2010-02-17 09:34:10

是的，这也是它的一部分。谢谢 – 2010-02-17 09:39:26

你试过去除有合并单元格，看看它改变任何东西的TR？

当涉及到准确的餐桌设计时，我曾经历过colspans和rowspans的相当讨厌。如果你的图像看起来没有colspan-TR，那么我会从那里开始构建一个嵌套的表格集。

此外你的style.css似乎不完整，也许有什么问题吗？我至少将padding: 0; margin: 0;添加到表格（或“mytable”类）。确保您的图片没有空格和/或边框（例如，将img { border: 0; }添加到样式表中）。

来源

2010-02-17 09:12:29 Select0r

用colspan去除TR's什么都不做。加入填充和边距不会对 – 2010-02-17 09:15:39

设置的cellpadding和CELLSPACING 0将删除的行和列之间的不必要的空间...

来源

2010-02-17 09:19:11 Vijay

161

添加到vectran的答案：您还必须在表元素上设置cellspacing属性以实现跨浏览器兼容性。

<table cellspacing="0">

EDIT（为了完整起见，我5年以后扩展这方面:)：

的Internet Explorer 6和的Internet Explorer 7需要，可直接设置cellspacing为表属性否则间距不会消失。

的Internet Explorer 8个和更高版本和流行的浏览器所有其他版本 - 浏览器，火狐，歌剧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>

来源

2010-02-17 09:26:54 easwee

它修复了它的一部分。谢谢 – 2010-02-17 09:33:03

谢谢！这有助于 – 2011-11-07 04:06:47

这解决了我期待解决的问题，谢谢队友！ :) – codepleb 2013-10-15 20:27:22

这个工作对我：

#table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

来源

2010-09-17 00:13:09 pagetribe

对于TD的图像，用这个图片：

display: block;

这对我来说

来源

2012-01-02 13:54:57

它为我工作 – 2013-11-17 10:09:42

谢谢，对我也很好。 – monteirobrena 2014-05-07 01:47:38

试试这个，消除不需要的空间，

table{ 
border-collapse: collapse; /* 'cellspacing' equivalent */ 
} 

table td, 
table th{ 
padding: 0; /* 'cellpadding' equivalent */ 
}

来源

2012-12-27 12:26:41

table 
{ 
    border-collapse: collapse; 
}

会崩溃所有边界分隔表列...

，或者尝试

<table cellspacing="0" style="border-spacing: 0;">

做所有单元格间距为0和边框间距0以实现相同。

玩得开心！

来源

2013-03-20 05:55:19

'是无效的标记！ '

'会是正确的 – 2014-01-06 08:26:13

是的，你是对的我已经更新了答案......谢谢 – 2014-01-11 14:33:30

符合标准的HTML5添加这一切的CSS删除表中的图像之间的所有空间：

table { 
    border-spacing: 0; 
    border-collapse: collapse; 
} 
td { 
    padding:0px; 
} 
td img { 
    display:block; 
}

来源

2014-05-21 20:47:27 totallytotallyamazing

我缺少'padding：0px'。添加它做了诡计！ – Misiu 2016-11-03 13:08:12

加入这一行到文件S的开始为我工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

修改设置合适的边框属性的CSS不起作用，直到我添加上述行

来源

2014-11-20 17:15:28

这是为我工作的唯一的东西！ +1并感谢您！我将它设置为严格而不是过渡。 – 2015-03-15 17:53:56

只需加上雅各布的答案顶部img在td，

body {line-height: 0;} 
img {display: block; vertical-align: bottom;}

这适用于大多数电子邮件客户端，包括Gmail。但不是Outlook。对于后市，你需要做两步更多：

table {border-collapse: collapse;}

，并设置每个td元素具有相同的height和width作为其包含的图像。例如，

<td width="600" height="80" style="line-height: 80px;"> 
    <img height="80" src="http://www.website.com/images/Nature_01.jpg" width="600" /> 
</td>

来源

2015-06-26 04:37:14 hexinpeter

如何删除表中的行和列之间的不需要的空间？

回答

相关问题