html - 桌子上的 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 */

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