テーブルをさまざまなブラウザで正しく表示することに夢中になっています。一方のブラウザに入ったと思ったら、もう一方のブラウザで変更されています。IE7/8 と Firefox が私のターゲット ブラウザです。
誰かがコードを見てください。何が問題なのかわかりません。テーブルは Javascript によって生成されます。幅を 220px に固定する必要があります。主な問題は、幅の制御に問題がある 3 つの tds がある tfoot です。
コードの関連部分は次のとおりです。
<table class="favouritelinks" cellspacing="0" cellpadding="0" width="220" >
<thead>
<tr><td colspan="3">Your Favourite Links</td></tr>
</thead>
<tbody id="tulemused" ></tbody>
<tr>
<td width="50">Name</td><td><input type="text" id="key" name="key" value="" /></td>
<td rowspan="2"><a href="javascript:insert_value()"><div class="addimg"></div></a></td>
</tr>
<tr>
<td width="50">URL</td><td><input type="text" id="val" name="val" value="" /></td>
</tr>
</table>
そしてCSS：
.favouritelinks td{
height: 20px;
padding: 3px;
border-bottom: 1px solid white;
word-break: break-all;
}
.favouritelinks td a{
color: white;
text-decoration: none;
}
thead{
background: url(img/title5.png) no-repeat;
color: #444;
font: bold 16px Helvetica;
text-shadow: 0 1px 0 #FFF;
text-align: center;
width: 220px;
height: 36px;
}
thead tr {
height: 36px;
}
.container{
width: 220px;
margin-top: 105px;
margin-left: 10px;
}
.delimg {
background: url(img/details_close.png) no-repeat;
width: 20px;
height: 20px;
float: right;
}
.addimg {
background: url(img/details_open.png) no-repeat;
width: 20px;
height: 20px;
float: right;
}
.urls {
display: none;
}
私は何を間違っていますか？
