Html 表格单元格上的额外空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15969327/
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
Extra white space on table cells
提问by Adam G
I am creating a table with 5 images across, one in each cell. I want it to span 920px, with 10px gap between each cell. Which equals 176 for each cell, so I made my images 176px wide.
我正在创建一个包含 5 个图像的表格，每个单元格中一个。我希望它跨越 920 像素，每个单元格之间有 10 像素的间隙。每个单元格等于 176，因此我将图像宽度设置为 176 像素。
This is my html and CSS:
这是我的 html 和 CSS：
<table>
<tr>
<td><a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Two"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
<td><a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Two"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
<td><a class="fancybox-effects-c" rel="group" href="images/newhomes_01.jpeg" title="New Home Number Three"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
<td><a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Four"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
<td><a class="fancybox-effects-c" rel="group" href="images/newhomes_01.jpeg" title="New Home Number Five"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
</table>
table {
width:100%;
cell-padding:"0";
cell-spacing:"0";
margin:0;
border:none;
}
td {
width:176px;
}
You can see in my attached image. that there is this white space on right side inside each cell. I thought cell-padding and cell-spacing would fix it, but it didn't. Even doing td a set witdth of 176px didn't work. What am I doing wrong? Is there a better method?
你可以在我的附图中看到。每个单元格内的右侧都有这个空白区域。我认为单元格填充和单元格间距可以解决它，但事实并非如此。即使做 td 设置 witdth 176px 也没有用。我究竟做错了什么？有没有更好的方法？
采纳答案by Michael Besteck
You need to set the values for padding, margin and border explicitly. Take a look at the corrected code below:
您需要明确设置填充、边距和边框的值。看看下面更正后的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
table {
width: 100%;
padding: 0;
margin: 0;
border: 0;
border-collapse: collapse;
}
td {
width: 176px;
padding: 0 10px 0 0;
margin: 0;
border: 0;
}
td.last {
padding: 0;
margin: 0;
border: 0;
}
</style>
</head>
<body>
<div id="imageContainer" style="width: 920px; margin: 0; padding: 0; border: 0;">
<table>
<tr>
<td>
<a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Two"
><img src="testImage176.jpg" class="fade" alt=""
/></a>
</td>
<td>
<a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Two"
><img src="testImage176.jpg" class="fade" alt=""
/></a>
</td>
<td>
<a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Three"
><img src="testImage176.jpg" class="fade" alt=""
/></a>
</td>
<td>
<a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Four"
><img src="testImage176.jpg" class="fade" alt=""
/></a>
</td>
<td class="last">
<a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Five"
><img src="testImage176.jpg" class="fade" alt=""
/></a>
</td>
</tr>
</table>
</div>
</body>
</html>
回答by Sowmya
回答by Town
cell-spacingand cell-paddingdon't exist in CSS.
cell-spacing并且cell-padding不存在于 CSS 中。
For what you're trying to achieve, you can use:
对于您想要实现的目标，您可以使用：
border-spacing: 10px;
Here's a demo: http://jsfiddle.net/Town/7Gkxr/
这是一个演示：http: //jsfiddle.net/Town/7Gkxr/
and
和
padding: 0 // applied to your td elements, gives you the equivalent of cellpadding="0"
There's an existing question on SO about this: Set cellpadding and cellspacing in CSS?
有一个关于此的现有问题：在 CSS 中设置单元格填充和单元格间距？
Also, as your table contains images, I'd remove the width settings for tableand td, as the table will be as wide as the sum of the images anyway.
此外，由于你的表包含图像，我删除宽度设置为table和td，作为表将是一样宽的图像的总和反正。
