HTML + CSS表，麻煩設置邊框

Question

我正在嘗試使用HTML Table在線制作Sudoku板，並使用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;
}

Answer 1

您可能想將類分配給單元格本身，而不是輸入字段。

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