HTML + CSS表，设置边框时遇到问题

Question

我正在尝试使用HTML表格在线制作数独板并使用CSS格式化。理想情况下，输出看起来像这个图像：

问题是我无法正确设置边框。下面是一个3乘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;
}

Answer 1

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

Answer 2

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

<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表）