границы в ячейках таблицы перерисовывают остальные границы

stalker_2000 · June 8, 2012

Приветствую! Рисую календарь, выглядит вот так:

пытаюсь добавить границы ячейкам таблицы, получаю такое:

Как видно, затирается левая и нижняя граница таблицы, а так же граница строки после дней недели. Подскажите, как это исправить?

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <style>
* { padding: 0; margin: 0; }
body { padding: 50px; }

body {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 13px; }

table.calendar {
  float: left;
  margin-top: 10px;
  margin-right: 10px;
  border: 1px solid #000 !important; }
table.calendar, table.calendar tr, table.calendar td, table.calendar th { border-collapse: collapse; }
table.calendar td { border: 1px solid #e0e0e0; }

table.calendar tr.weeks td, table.calendar th { padding: 5px; }
table.calendar tr.weeks td { font-weight: bold; }
table.calendar tr.weeks { border-bottom: 1px solid #000 !important; }

table.calendar td { text-align: center; }
table.calendar th { background: #6c90e6; }

table.calendar td a, table.calendar td div {
  display: block;
  padding: 5px;
  text-decoration: none;
  color: #000; }
table.calendar td a.current, table.calendar td a.current:hover { background: #6c90e6; }

table.calendar td div { cursor: default; }  
table.calendar td a:hover { background: #ffe0aa; }
  </style>
</head>

<body>
<table class="calendar">
<tr><th colspan="100">Июнь 2012</th></tr>
<tr class="weeks">
  <td>Пн</td>
  <td>Вт</td>
  <td>Ср</td>
  <td>Чт</td>
  <td>Пт</td>
  <td class="red">Сб</td>
  <td class="red">Вс</td>
</tr>
<tr>
  <td><div> </div></td>
  <td><div> </div></td>
  <td><div> </div></td>
  <td><div> </div></td>
  <td><a href="#">1</a></td>
  <td><a class="bold red " href="#">2</a></td>
  <td><a class="bold red " href="#">3</a></td>
</tr>
<tr>
  <td><a href="#">4</a></td>
  <td><a href="#">5</a></td>
  <td><a href="#">6</a></td>
  <td><a href="#">7</a></td>
  <td><a class="current " href="#">8</a></td>
  <td><a class="bold red " href="#">9</a></td>
  <td><a class="bold red " href="#">10</a></td>
</tr>
<tr>
  <td><a href="#">11</a></td>
  <td><a href="#">12</a></td>
  <td><a href="#">13</a></td>
  <td><a href="#">14</a></td>
  <td><a href="#">15</a></td>
  <td><a class="bold red " href="#">16</a></td>
  <td><a class="bold red " href="#">17</a></td>
</tr>
<tr>
  <td><a href="#">18</a></td>
  <td><a href="#">19</a></td>
  <td><a href="#">20</a></td>
  <td><a href="#">21</a></td>
  <td><a href="#">22</a></td>
  <td><a class="bold red " href="#">23</a></td>
  <td><a class="bold red " href="#">24</a></td>
</tr>
<tr>
  <td><a href="#">25</a></td>
  <td><a href="#">26</a></td>
  <td><a href="#">27</a></td>
  <td><a href="#">28</a></td>
  <td><a href="#">29</a></td>
  <td><a class="bold red " href="#">30</a></td>
  <td><div> </div></td>
</tr>
<tr>
  <td><div> </div></td>
  <td><div> </div></td>
  <td><div> </div></td>
  <td><div> </div></td>
  <td><div> </div></td>
  <td><div> </div></td>
  <td><div> </div></td>
</tr>
</table>
</body>
</html>

v01d0s · June 8, 2012

ничего не пришло на ум кроме как встваить

 td:first-child {border-left: 1px solid black !important;}
 tr.lastTr td {border-bottom: 1px solid black !important;}

stalker_2000 · June 11, 2012

решил обойтись утолщением границ до 2px...

Sign In

границы в ячейках таблицы перерисовывают остальные границы

Question

stalker_2000

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

v01d0s

Link to comment

Share on other sites

stalker_2000

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information