I have this table:
With the following code:
<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>
and the following 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;
}
I want to make it's inner borders 1px width while still keeping the empty top-left cell without showing the borders:
The problem is that if I put border-collapse:collapse
then the top-left row appears with its border, even with the empty-cells:hide...
Any suggestion?
Click the table or select the cells where you want to add or change borders. On the Tables tab, under Draw Borders, on the Line Style pop-up menu, click the line style that you want. On the Tables tab, under Draw Borders, click Borders, and then click the borders that you want.
Go to Table Tools >Design > Table Styles > Borders, and then click the border option that you want to change.
Best solution : Use border-collapse:collapse; for the <table> element.
border-bottom-style. border-left-style. border-right-style.
You can specify override style for top left cell, using:
#comparativa tr:first-child td:first-child { border-left: 0; border-top: 0; }
Like so?
http://jsfiddle.net/apJkX/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With