CSS on table not working

Question

I have this HTML table:

<table width="1100" border="1" style="text-align:center;" class="invoice">

<tr><td>&nbsp;</td><td>&nbsp;</td><td>Amount Due</td><td>Amount Enc.</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>CAD <?php echo $key['remainingbalance']; ?></td><td>&nbsp;</td></tr>

</table>

with this CSS:

table.invoice, th.invoice, td.invoice{
    border: 1px solid black;
}

however it's not styling my table, I am expecting all of the borders for the table, td and tr to be 1px solid black, why is this not working?

Solution

The border in your sample will only apply to the table. 1) table.invoice -- this refers to a table with the class "invoice"
2) th.invoice -- this refers to a header-cell with the class "invoice"
3) td.invoice -- this refers to a normal table-cell with the class "invoice"

so 2 & 3 don't apply, because you don't have that class on your table cells.

You could change the styles like this:

table.invoice, .invoice th, .invoice td{
    border: 1px solid black;
}
table.invoice{border-collapse:collapse;} /* update following asker's comment */

... then the border will apply to the header-cell and the normal cell.

Comments

[user979331]

This works :) now is there away to get it single line and not double lined?

[Faust]

add: table{border-collapse:collapse; } (if I understand you correctly)