Помогите, пожалуйста, с таблицей

ХОЛОДный · January 25, 2009

День добрый. Не получается сделать такую штуку:

Это таблица 10х10 ячеек. Каждая ячейка - 20х20 пикселей.

Граница между ячейками = 1 пиксель.

При наведении мышки на ячейку, срабатывает JS-событие. Стиль ячейки перезаписывается.

У ячейки может быть четыре стиля:

/**Это сама таблица*/
.placementTable{
	border-collapse: collapse;
	border: solid 1px #ffffff;
}

/**это ее ячейка*/
.placementTable td{
	border-collapse: collapse;
	border: solid 1px #ffffff;
}

/**Три правых закрашенных ячейки*/
.placementCellOccupied{
	width: 20px;
	height: 20px;
	background: #0099ff;
	border-collapse: collapse;
}

/**Бледно-голубой*/
.placementCellSurround{
	width: 20px;
	height: 20px;
	background: #99ccff;
	border: none;
	border-collapse: collapse;
}

/**Белые ячейки с голубой границей*/
.placementCellActive{
	width: 20px;
	height: 20px;
	background: #ffffff;
	border: solid 1px #0099ff;
	border-collapse: collapse;


/**Просто пустая серая ячейка*/
.placementCell{
	width: 20px;
	height: 20px;
	background: #cccccc;
	border-collapse: collapse;

}

Не секрет, что это поле для морского боя.

Проблема заключается в том, что я никак не могу добиться того, чтобы таблица не "разъезжалась" - границы между ячейками почему-то не коллапсятся: при смене стиля ячейки, граница расширяется до 2ух пикселей (ил больше?)

Как надо правильно, подскажите, пожалуйста.

Спасибо.

Edited January 25, 2009 by ХОЛОДный

Searcher · January 25, 2009

width и height нужно перенести в .placementTable td {...} и еще добавить туда padding какой нужен

border:none не подходит, потому что означает, что границы между ячейками не будет, а в других стилях она = 1px, соответственно надо сделать её просто цветом фона

border-collapse: collapse; указывается для таблицы, а не для ячеек

ХОЛОДный · January 25, 2009

width и height нужно перенести в .placementTable td {...} и еще добавить туда padding какой нужен
border:none не подходит, потому что означает, что границы между ячейками не будет, а в других стилях она = 1px, соответственно надо сделать её просто цветом фона
border-collapse: collapse; указывается для таблицы, а не для ячеек

Исправил, больше таблица не расползается.

А есть возможность рисовать границу "внутрь" ячейки таблицы, ил она пририсовывается тольль снаружи?

ХОЛОДный · January 25, 2009

Я разобрался, в чем проблема. Я использую GWT (Google web toolkit), он генерит мне таблицу для морского боя следующим образом:

Из-за этого у меня расстояние между ячейками не 1px, а больше.

Есть ли возможность совершить следующее:

1. Все ячейки в таблице белые.

2. Граница между ячейками = 1px

3. Границы "коллапсируют", т.е. от ячейки до ячейки расстояние = 1px.

4. Внутри каждой ячейки есть див.

5. На каждый из этих див'ов я натягиваю стили, внешний вид которых показан на этой картинке:

Или здесь должно быть другое решение?

Scrum · January 25, 2009

ну попробуем с простого примера.

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  table {
	background: #fff;
  }
  td {
	width: 50px;
	height: 50px;
	padding: 0;
	background: silver;
  }
  div {
	height: 50px;
	background: #06C;
  }
  span {
	display: block;
	height: 46px;
	width: 46px;
	border: 2px solid #06c;
  }
  span.range {
	border: none;
	background: #9CC;
	height: 50px;
	width: 50px;
  }


  /*]]>*/
  </style>
</head>

<body>
	<table cellspacing="1">
		<tr>
			<td>
				<div></div>
			</td>
			<td> </td>
			<td>
				<span></span>
			</td>
		</tr>
		<tr>
			<td> </td>
			<td>
				<span class="range"></span>
			</td>
			<td> </td>
		</tr>
	</table>
</body>

</html>

ХОЛОДный · January 25, 2009

Как круто! Спасибо большое!

Scrum · January 25, 2009

итого с вас 5 золотых ))

ХОЛОДный · January 25, 2009

Что-то с кодировкой страницы, не получается прочитать ваше последнее сообщение.

rus · January 25, 2009

Scrum, что за конструкция CDATA?

Частенько стал ее встречать в html, это ж ведь xml фича?

Scrum · January 25, 2009

клац

правда там потерлось малость, но смысл будет понятен.

Sign In

Помогите, пожалуйста, с таблицей

Question

ХОЛОДный

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

ХОЛОДный

Link to comment

Share on other sites

ХОЛОДный

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

ХОЛОДный

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

ХОЛОДный

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information