HTML+CSS 表格，设置边框麻烦答案

【问题标题】：HTML+CSS Table, trouble setting bordersHTML+CSS 表格，设置边框麻烦
【发布时间】：2017-06-11 19:08:28
【问题描述】：

我正在尝试使用 HTML 表格在线制作数独板并使用 CSS 对其进行格式化。理想情况下，输出应如下图所示：

问题是我无法正确设置边框。下面是单个 3 x 3 框的代码，不幸的是它没有正确输出。具有“end”类的单元格似乎有一个非折叠边框。有什么建议么？

HTML：

<table>
 <tr>
    <td><input type='text' size='2' /></td>
    <td><input type='text' size='2' /></td>
    <td><input type='text' size='2' class='end'/></td>
  </tr>
</table>

CSS：

table, td{
    border-color: black;
    border-width: 1px;
    border-style: solid;
}

table{
      border-collapse:collapse;
}

td{
  padding:0px;
  margin: 0px;
}

td .end{
  border-style:solid;
  border-color:black;
  border-width: 1px 3px 1px 1px;
}

input{
  padding:0px;
  margin:0px;
}

【问题讨论】：

标签： html css html-table border

【解决方案1】：

您可能希望将类分配给单元格本身，而不是输入字段。

【讨论】：

感谢您接住那个鲍比！完美解决问题。

【解决方案2】：

现代浏览器允许不使用类的数独表：
（此代码适用于 IE9 beta 和所有其他浏览器）

<style>
    table { border:3px solid black; }
    td { width:60px; height:60px; border:1px solid black; }
    td:nth-child(3n) { border-right-width:3px; }
    tr:nth-child(3n) td { border-bottom-width:3px; }
</style>

（假设我们使用 9x9 的表格）

【讨论】：