将边框放在HTML表上的问题

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

你需要border-collapse的table,就像这样:

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

附上一个小提琴.

此外,您可以使用nth-child选择器使您的代码更简洁.您不需要在每个表格单元格上显式设置类名称.如果您还向表中添加行或列,此解决方案也可以使用.查看更新的小提琴.

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