CODEWITHSUNDEEP
htmlcsshtml-tableborder
djs22
djs22

Reputation: 1156

HTML+CSS Table, trouble setting borders

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:

enter image description here

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?

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

Upvotes: 0

Views: 1842

Answers (2)

Šime Vidas
Šime Vidas

Reputation: 185933

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)

Upvotes: 4

Bobby
Bobby

Reputation: 11576

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

Upvotes: 4

Related Questions