html - 应用表格单元格边框

我有一个带有“productsTable”类的 HTML 表。我想给表格中的每个单元格一个边框。现在我在我的样式表中尝试了以下内容，但这两个都不起作用。我究竟做错了什么？谢谢你

td.productsTable
{
    border: 1px dotted #999999;
}

.productsTable td
{
    border: 1px dotted #999999;
}

HTML:

<table class="productsTable" width="100%" height="100%" cellspacing="2px;">
<tr>
<td width="40%">We Offer:</td>
<td class="ephoneFree tableHeader" width="20%" align="center">e-phone FREE</td>
<td class="personal tableHeader" width="20%" align="center">Personal</td>
<td class="PBX tableHeader" width="20%" align="center">Pro PBX</td>
</tr>
<tr>
<td width="40%">Pricing</td>
<td width="20%" align="center">FREE</td>
<td width="20%" align="center">£3 per month</td>
<td width="20%" align="center">From £5 per month</td>
</tr>
</table>

最佳答案

td.productsTable 将不起作用 因为您没有带有 <td> 类的 productsTable 元素。
但是，您的第二个 CSS 规则 .productsTable td ，此 将起作用 因为您确实有 <td> 元素，其父元素为 productsTable 类。
我已经对此进行了快速调整，您可以看到它正常工作:

td {
  border: 1px dotted #999;
}

<table width="100%" height="100%" cellspacing="2px;">
  <tr>
    <td width="40%">We Offer:</td>
    <td width="20%" align="center">e-phone FREE</td>
    <td width="20%" align="center">Personal</td>
    <td width="20%" align="center">Pro PBX</td>
  </tr>
  <tr>
    <td width="40%">Pricing</td>
    <td width="20%" align="center">FREE</td>
    <td width="20%" align="center">£3 per month</td>
    <td width="20%" align="center">From £5 per month</td>
  </tr>
</table>

如果这对您不起作用，则可能是您没有正确链接您的 CSS 文件，或者有另一个 CSS 规则覆盖了它。试试 inspecting element 看看。

关于html - 应用表格单元格边框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10783491/