表格單元格上的額外空白區域
[英]Extra white space on table cells
問題描述
我正在創建一個包含5個圖像的表，每個單元格中有一個。 我希望它跨越920px，每個單元格之間有10px的間隙。 每個單元格相當於176，所以我將圖像寬176px。
這是我的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;
}
你可以在我的附圖中看到。 每個細胞內右側都有這個白色空間。 我認為細胞填充和細胞間距會修復它，但事實並非如此。 甚至做一套176px的套裝也行不通。 我究竟做錯了什么？ 有更好的方法嗎？
3 個解決方案
解決方案1
5 2013-04-12 10:47:38
解決方案2
3 已采納 2013-04-12 11:13:38
您需要明確設置填充，邊距和邊框的值。 看看下面更正的代碼：
<!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>
解決方案3
1 2013-04-12 10:54:42
CSS中不存在cell-spacing和cell-padding 。
對於您想要實現的目標，您可以使用：
border-spacing: 10px;
這是一個演示： http ： //jsfiddle.net/Town/7Gkxr/
和
padding: 0 // applied to your td elements, gives you the equivalent of cellpadding="0"
關於這個問題，現在存在一個問題： 在CSS中設置cellpadding和cellspacing？
此外，由於您的表包含圖像，我將刪除table和td的寬度設置，因為表格將與圖像的總和一樣寬。
如何刪除html表格單元格中的多余空白？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.