Tôi có bảng này:Làm thế nào để làm cho bảng này chỉ có 1 pixel biên giới?
Với đoạn mã sau:
<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>
và CSS sau đây
#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;
}
tôi muốn làm cho nó là biên giới bên trong 1px rộng trong khi vẫn giữ ô trên cùng bên trái trống mà không hiển thị đường viền:
Vấn đề là nếu tôi đặt border-collapse:collapse
thì hàng trên cùng bên trái xuất hiện với đường viền của nó, ngay cả với các ô trống: ẩn ...
Bất kỳ đề xuất nào?
Cảm ơn lol, đó là khá đơn giản – Aleix
@Tebb Bạn đang chào đón :) –