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?

Answer 1

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.