Ho questa tabella:Come rendere questa tabella solo un bordo di 1 pixel?
Con il seguente codice:
<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>
e il seguente 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;
}
Voglio fare di essa la bordi interni larghezza 1px mentre ancora mantenendo la cella vuota in alto a sinistra senza mostrare i bordi:
Il problema è che se metto border-collapse:collapse
poi la fila in alto a sinistra appare con il suo confine, anche con le empty-cells: nascondere ...
Qualsiasi suggerimento?
Grazie lol, che era piuttosto semplice – Aleix
@Tebb Sei :) benvenuto –