テーブルの隙間について
WEBのデザインを、本を読みつつ学んでいるのですが
テーブルに関して疑問があるので、質問させていただきます。
【cssの中身】
/* ヘッダー */
.head {
background-color:#ccc;
width:100%;
height:70px;
margin-left:auto;
margin-right:auto;
}
.head h1 {
font-size:14px;
font-family:Verdana,Osaka,MS UI Gothic,;
color:#000;
margin-bottom:2px;
}
.head td{
vertical-align:middle;
}
.head1 {
width:40px;
text-align:right;
}
.head2 {
text-align:left;
padding-right: 4px;
}
.date{
font-size: 12px;
color: #666;
font-family : Verdana,Osaka,"MS UI Gothic",serif;
}
/* メニュー */
.menu1 div{
float: left;
}
.menu{
width: 100%;
background-color: #666;
font-size: 12px;
font-weight: bold;
border-top: solid 1px white;
}
.menu1 div{
width: 80px;
border-right: solid 1px white;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.menu2{
text-align: right;
}
.menu2 div{
margin-right: 10px;
color: #fff;
}
.menu1 a{
color: #999;
text-decoration: none;
}
.menu1 a:hover{
color: #fff;
}
【ページの中身】
<a name="top">
<table class="head" cellspacing="0">
<tr>
<td class="head1">
<img src="icon.jpg" border="0" alt="*" width="35" height="36">
</td>
<td class="head2">
<h1>********</h1>
</td>
</tr>
</table>
</a>
<table class="menu" cellspacing="0">
<tr>
<td class="menu1">
<div><a href="link.html">Test</a></div>
<div><a href="link.html">Test</a></div>
<div><a href="link.html">Test</a></div>
<div><a href="link.html">Test</a></div>
<div><a href="link.html">Test</a></div>
</td>
<td class="menu2">
<div>Last update:00.00</div>
</td>
</table>
このような形で、ヘッダーとメニューを作っているのですが、メニューの線とヘッダーとの間に1pxほどの隙間(白い部分)が出来てしまいます。これをなくすことはできないのでしょうか?メニュー部分のテーブルに cellspacing="0"を入れると隙間が無くなると本に書いていたのですが、ほんの少しだけ隙間が残ってしまいます。
宜しくお願いします。
お礼
早々のご回答有難うございます! IEでの閲覧です。 質問が乏しくすいませんでした。 border-spacing:0; も試してみたのですが、やはり駄目でした。 htmlファイルをincludeしています。 <table class="WTbl"> <tr> <td class="Headleft"> <%@ include file="../html/system/A.html" %> </td> <td class="Headright"> <%@ include file="../html/system/B.html" %> </td> </tr> このAとBのファイルの隙間をなくしたいのですが・・。 クラスの内容は以下の通りです。 .WTbl{ margin: 0px; padding: 0px; width: 100%; border-collapse: collapse; border-spacing:0; } .Headleft{ padding: 0px; margin: 0px; } .Headright{ padding: 0px; margin: 0px; } すいません急いで、質問させていただいたので 小文字になってしまいました。 jspはJSPと同じです。 よろしくお願い致します。