Табличные ячейки с бордерами

Styx · January 8, 2011

Привет.

Имеется таблица, один столбец которой имеет левый и правый бордеры. При движении указателя мыши по таблице строка под курсором выделяется путем установки ее ячейкам верхнего и нижнего бордера.

Вот как это в идеале выглядит:

Это имеющаяся верстка данной таблицы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	td {
		border-top:1px solid transparent; /* prevent table twitch on hover */
		border-bottom:1px solid #eee;
	}
	.col {
		border-left:1px solid #f00;
		border-right:1px solid #f00;
	}
	tr:hover td {
		border-top:1px solid #888;
		border-bottom:1px solid #888;
	}
</style>
</head>

<body>
<table width="50%" cellpadding="0" cellspacing="0">
	<tr>
		<td>cell00</td>
		<td>cell01</td>
		<td class="col">cell02</td>
		<td>cell03</td>
		<td>cell04</td>
	</tr>
	<tr>
		<td>cell10</td>
		<td>cell11</td>
		<td class="col">cell12</td>
		<td>cell13</td>
		<td>cell14</td>
	</tr>
	<tr>
		<td>cell20</td>
		<td>cell21</td>
		<td class="col">cell22</td>
		<td>cell23</td>
		<td>cell24</td>
	</tr>
	<tr>
		<td>cell30</td>
		<td>cell31</td>
		<td class="col">cell32</td>
		<td>cell33</td>
		<td>cell34</td>
	</tr>
	<tr>
		<td>cell40</td>
		<td>cell41</td>
		<td class="col">cell42</td>
		<td>cell43</td>
		<td>cell44</td>
	</tr>
	<tr>
		<td>cell50</td>
		<td>cell51</td>
		<td class="col">cell52</td>
		<td>cell53</td>
		<td>cell54</td>
	</tr>
	<tr>
		<td>cell60</td>
		<td>cell61</td>
		<td class="col">cell62</td>
		<td>cell63</td>
		<td>cell64</td>
	</tr>
</table>
<p>This must not move when mouse pointer hovers over the table!</p>
</body>
</html>

В Opera все отображается правильно. Но в FF и IE вертикальный бордер столбца оказывается несплошным (с разрывами на стыке ячеек)

Если задать таблице border-collapse: collapse, то появляются проблемы с наложением и нерегулируемым (?) перекрытием границ ячеек (нужные бордеры исчезают в каких-то браузерах). А если убрать из CSS первое правило (border-top:1px solid transparent), то при наведении указателя мыши на таблицу контент под таблицей дергается, смещаясь вниз на 1px.

Вопрос в том, как избавиться от разрывов границ столбца и сохранить при этом остальной функционал (отображение верхней и нижней границ строки под курсором). Помогите, плиз.

Sign In

Табличные ячейки с бордерами

Question

Styx

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information