HTML + CSS Table, проблема с установкой границ - PullRequest
Новая
       14

HTML + CSS Table, проблема с установкой границ

0 голосов
/ 01 октября 2010

Я пытаюсь сделать доску судоку онлайн с использованием таблицы HTML и отформатировать ее с помощью CSS. В идеале вывод должен выглядеть следующим образом:

enter image description here

Проблема в том, что у меня проблемы с правильной установкой границ. Ниже приведен код для одного блока 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;
}

Ответы [ 2 ]

4 голосов
/ 01 октября 2010

Современные браузеры позволяют использовать таблицы судоку без использования классов:
(этот код работает в бета-версии 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)

4 голосов
/ 01 октября 2010

Возможно, вы захотите присвоить класс самой ячейке, а не полю ввода.

...