Html 如何删除表中行和列之间不需要的空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2279396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove unwanted space between rows and columns in table?
提问by Zach Galant
How do I remove the extra space between the rows and columns in the table.
如何删除表中行和列之间的额外空间。
I've tried changing the margin, padding, and various border properties on the table and tr and td.
我已经尝试更改表格以及 tr 和 td 上的边距、填充和各种边框属性。
I want the pictures to all be right next to each other to look like one big image.
我希望所有图片都紧挨着，看起来像一张大图。
How should I fix this?
我应该如何解决这个问题？
CSS
CSS
table {
border-collapse: collapse;
}
HTML
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>
采纳答案by vectran
Add this CSS reset to your CSS code: (From here)
将此 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;
}
It'll reset the CSS effectively, getting rid of the padding and margins.
它将有效地重置 CSS，摆脱填充和边距。
回答by easwee
Adding to vectran's answer: You also have to set cellspacingattribute on the table element for cross-browser compatibility.
添加到 vectran 的答案：您还必须cellspacing在 table 元素上设置属性以实现跨浏览器兼容性。
<table cellspacing="0">
EDIT (for the sake of completeness I'm expanding this 5 years later:):
编辑（为了完整起见，我在 5 年后对此进行了扩展:)：
Internet Explorer 6and Internet Explorer 7required you to set cellspacingdirectly as a table attribute, otherwise the spacing wouldn't vanish.
的Internet Explorer 6和Internet Explorer 7中需要您设置CELLSPACING直接作为表的属性，否则间隔将不会消失。
Internet Explorer 8and later versions and all other versions of popular browsers - Chrome, Firefox, Opera 4+- support the CSS property border-spacing.
Internet Explorer 8和更高版本以及所有其他版本的流行浏览器 - Chrome、Firefox、Opera 4+- 支持 CSS 属性border-spacing。
So in order to make a cross-browser table cell spacing reset (supporting IE6 as a dinosaur browser), you can follow the below code sample:
所以为了使跨浏览器表格单元格间距重置（支持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>回答by pagetribe
This worked for me:
这对我有用：
#table {
border-collapse: collapse;
border-spacing: 0;
}
回答by Jacob Bertelsen
For images in td, use this for images:
对于 td 中的图像，将其用于图像：
display: block;
That removes unwanted space for me
这为我删除了不需要的空间
回答by hexinpeter
Just adding on top of Jacob's answer, for imgin td,
只是在雅各布的答案之上添加，对于imgin td，
body {line-height: 0;}
img {display: block; vertical-align: bottom;}
This works for most email clients, including Gmail. But not Outlook. For outlook, you need to do two steps more:
这适用于大多数电子邮件客户端，包括 Gmail。但不是 Outlook。对于outlook，还需要多做两步：
table {border-collapse: collapse;}
and set every tdelements to have the same heightand widthas its contained images. For example,
并设置每个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>
回答by Aamir Shahzad
table
{
border-collapse: collapse;
}
will collapse all borders separating the table columns...
将折叠分隔表格列的所有边框...
or try
或尝试
<table cellspacing="0" style="border-spacing: 0;">
do all cell-spacingto 0 and border spacing 0 to achieve same.
将所有单元格间距设为 0 并将边框间距设为 0 以实现相同的效果。
have a fun!
玩得开心！
回答by totallytotallyamazing
For standards compliant HTML5 add all this css to remove all space between images in tables:
对于符合标准的 HTML5，添加所有这些 css 以删除表格中图像之间的所有空间：
table {
border-spacing: 0;
border-collapse: collapse;
}
td {
padding:0px;
}
td img {
display:block;
}
回答by Rakesh Vadnal
Try this,
尝试这个，
table{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td,
table th{
padding: 0; /* 'cellpadding' equivalent */
}
回答by Vijay
setting Cellpadding and cellspacing to 0 will remove the unnecessary space between rows and columns...
将 Cellpadding 和 cellpacing 设置为 0 将删除行和列之间不必要的空间...
回答by ángel Ramírez Isea
All I had to do was add:
我所要做的就是添加：
line-height: 0px;
in my
在我的
<tr ...>
