在 HTML table 上添加边框时出现问题

Question

我正在尝试实现这种效果：

我已经尝试了以下方法，但它根本不起作用（根本没有出现边框）。谁能解释一下如何实现我想要的。

<style type="text/css">
  .withBorder {
    border: 1px;
  }

  .withoutBorder {
    border: 0px;
  }
</style>

<table>
  <tr>
    <td class = 'withoutBorder'> cell1 </td>
    <td class = 'withBorder'> cell2 </td>
    <td class = 'withoutBorder'> cell3 </td>
  </tr>

  <tr>
    <td class = 'withBorder'> cell1 </td>
    <td class = 'withoutBorder'> cell2 </td>
    <td class = 'withBorder'> cell3 </td>
  </tr>
</table>

Answer 1

尝试

.withBorder {
    border: 1px solid black;
}

你应该在边框的 size 之后定义 type 和 color。

Answer 2

您需要 table 上的 border-collapse，像这样：

table {
    border-collapse: collapse;
}
.withBorder {
    border: 1px solid #000;
}
.withoutBorder {
    border: none;
}

附上Fiddle.

此外，您可以使用 nth-child 选择器使您的代码更加简洁。您不需要在每个 table 单元格上显式设置 class 名称。如果您也向 table 添加行或列，则此解决方案有效。参见 updated Fiddle。

table {
    border-collapse: collapse;
}
tr:nth-child(2n+1) td:nth-child(2n+2),
tr:nth-child(2n+2) td:nth-child(2n+1) {
    border: 1px solid #000;
}

在 HTML table 上添加边框时出现问题

Problems putting a border on a HTML table

html

css

html-table