表格单元格上有多余的空白 [英] Extra white space on table cells
问题描述
我正在创建一张表格，其中包含5张图片，每个单元格一张.我希望它跨越920像素，每个单元格之间有10像素的间距.每个单元格等于176，所以我将图片的宽度设为176px.
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.
这是我的html和CSS:
This is my html and 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;
}
您可以在我的附件中看到.每个单元格右侧的空白处.我认为单元格填充和单元格间距可以解决此问题，但事实并非如此.即使执行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?
推荐答案
您需要显式设置padding，margin和border的值.看看下面的更正代码:
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>
这篇关于表格单元格上有多余的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
