桌子上的 CSS 不起作用

Question

我有这个 HTML 表格：

<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>

使用这个 CSS：

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

但是它不是我的表格样式，我希望表格的所有边框 td 和 tr 都是 1px 纯黑色，为什么这不起作用？

Answer 1

示例中的边框仅适用于表格。 1) table.invoice -- 这是指具有“发票”类的表
2) th.invoice -- 这指的是具有“发票”类的标题单元
3) td.invoice -- 这指的是具有“发票”类的普通表格单元

所以 2 和 3 不适用，因为您的表格单元格中没有该类。

你可以像这样改变样式：

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

...然后边框将应用于标题单元格和普通单元格。