我有這個表:如何讓這張表只有1個像素邊框?
用下面的代碼:
<table border="1" id="comparativa">
<tr>
<td rowspan="2"></td>
<td colspan="3" class="friuty">Fruity</td>
</tr>
<tr>
<td class="lila">Intensed</td>
<td class="lila">Medium</td>
<td class="lila">Low</td>
</tr>
<tr>
<td class="lila">Green</td>
<td><img src="img/forsutpeque.png" /></td>
<td><img src="img/donapeque.png" alt="" /></td>
<td>-</td>
</tr>
<tr>
<td class="lila">Mellow</td>
<td>-</td>
<td><img src="img/marpeque.png" alt="" /></td>
<td>-</td>
</tr>
<tr>
<td class="lila">Balanced</td>
<td>-</td>
<td><img src="img/cotxepeque.png" alt="" /></td>
<td>-</td>
</tr>
</table>
下面CSS
#comparativa {
width:350px;
font-size:1.2em;
border-spacing:0px;
border-collapse:separate;
empty-cells:hide !important;
border:0;
}
#comparativa tr td {
padding:2px 4px;
border:#9f4dc2 solid 1px;
text-align:center;
width:88px;
color:#bdac77;
}
#comparativa tr td.friuty {
background:#9f4dc2;
color:#fff;
text-transform:uppercase;
}
#comparativa tr td.lila {
background:#ecdff3;
text-transform:uppercase;
color:#9f4dc2;
text-align:left;
padding-top:2px;
padding-bottom:4px;
padding-left:10px;
}
我想讓它的內邊框1px的寬度,同時還保留空的左上角單元格而不顯示邊框:
問題是,如果我放border-collapse:collapse
那麼左上角的行會出現邊框,即使是空單元格:隱藏...
任何建議?
感謝大聲笑,這是很簡單的 – Aleix 2012-08-09 17:57:31
@Tebb不客氣:) – 2012-08-09 18:01:24