HTML+CSS Table, trouble setting borders

Question

Hi all,

I'm trying to make a Sudoku board online using an HTML Table and formatting it with CSS. Ideally the output would look like this image: http://www.examiner.com/images/blog/wysiwyg/image/sudoku.png

The problem is I'm having trouble setting the borders properly. Below is the code for a single 3 by 3 box, it unfortunately isn't outputting correctly. The cell with class 'end' seems to have a non collapsed border. Any suggestions?

Thanks in advance!

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

You might want to assign the class to the cell itself, and not to the input field.

Answer 2

Modern browsers allow sudoku tables without using classes:
(this code works in IE9 beta and all other browsers)

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

(assuming that we use a 9x9 table)