rowspan отменяет высоту ячеек в ie. можно это обойти?

Xoce · March 11, 2010

Вот картинка с отображением моей таблице в фф и ие соответственно:

вот мой код

<table border="1" height="200">
<tr>
   <td height="5" style="padding: 3px;">Название</td>
   <td style="padding: 3px;">Карточка записи</td>
   <td style="padding: 3px;">Название</td>
</tr>
<tr>
   <td height="10"></td>
   <td height="10" rowspan="999" style="background-color: #fff; padding: 10px 30px;">
      <div style="border: dashed 2px gray; width: 600px; height: 600px;"></div>
   </td>
   <td height="10"></td>
</tr>
<tr>
   <td height="10" style="padding: 3px;">1</td>
   <td height="10" style="padding: 3px;">3</td> 
</tr>
<tr>
   <td height="10" style="padding: 3px;">4</td>
   <td height="10" style="padding: 3px;">5</td>
</tr>
<tr>
   <td></td>
   <td> </td>
</tr>
</table>

проблема в том, что ие игнорирует высоту ячеек, указанную мной, для желаемого результата (желаемое показывает фф)

можно ли с этим бороться?

условие: я не знаю высоту встраиваемого через rowspan блока...

map · March 11, 2010

Бодался тоже как-то с такой проблемкой - ИЕ был неумолим - rowspan тянул боковые как ни прибивай - да и насколько помню указывать высоту строки в таблице не есть комильфо. В итоге отказался от объединения ячеек в центре - три колонки-ячейки (каркас - тут мне таблицы понятней ) и туда пихаем дивы. Либо сразу все кроить на слоях...всё имхо

Xoce · March 11, 2010

У меня именно что таблица, по-другому никак...

Или вообще весь дизайн перелопачивать... ))

slicemasta · March 11, 2010

совет, не верстайте скелет (стр-ру) таблицами, делайте это на дивах (div) а отступы как пологаеться margin + padding для этого они и созданы а не ячейками таблицы...

У меня именно что таблица, по-другому никак...
Или вообще весь дизайн перелопачивать... ))

Тогда обьедените боковые ячейки в одну и делайте отступы уже внутри .той ячейки с помощью предназначенного для этого дела средствами, читаем выше.

Edited March 11, 2010 by slicemasta

Xoce · March 11, 2010

Хм... видимо решения все-таки нет... Мне дивы не подходят, т.к. нужно сверстать таблицу, а не сетку макета.

slicemasta · March 11, 2010

https://dl.dropbox.com/u/1017635/1.html

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

Xoce · March 11, 2010

2 slicemasta,

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

Но!

У меня содержимое ячейки с rowspan принимает произвольную высоту, я её знать не могу (это другая таблица с непредсказуемым количеством строк, поэтому неопределенная высота получается)

slicemasta · March 11, 2010

все же тогда не понимаю почему не объеденить боковые ячейки в одну и не сделать блоками с отступом ячейки 1,4,3 и 5 ?

Xoce · March 11, 2010

Потому что тогда это будет не таблица. А у меня именно таблица, для данных.

ячейки 1 и 3 -- это одна строка в таблице, содержимое этих ячеек должно растягивать друг друга в зависимости от содержания. Короче, у меня обычная таблица, дивы здесь совершенно не при чом...

map · March 12, 2010

а если попробовать растащить ячейки таблицы через cellspacing на ширину центра и вставлять абсолютно позиционированный слой между ними?

Great Rash · March 12, 2010

А если вообще обойтись без rowspan и colspan? Или я что-то не так понял?


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

<head>
	<title>Test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		table {
			width: 100%;
			border-collapse: collapse;
			border-spacing: 0;
			border: 0;
		}

		table th {
			text-align: left;
		}

		table td,
		table th {
			border: 1px solid;
		}

		table td td {
			border-left: 0;
			border-right: 0;
			border-top: 0;
		}

		table td.side {
			width: 100px;
			vertical-align: top;
		}

		table td.main {
			height: 500px; /* для примера */
		}
	</style>
</head>

<body>

	<table cellspacing="0">
		<thead>
			<tr>
				<th>
					Название
				</th>
				<th>
					Карточка записи
				</th>
				<th>
					название
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="side">
					<table cellspacing="0">
						<tr>
							<td>
								 
							</td>
						</tr>
						<tr>
							<td>
								1
							</td>
						</tr>
						</tr>
							<td>
								4
							</td>
						</tr>
					</table>
				</td>
				<td class="main">
					 
				</td>
				<td class="side">
					<table cellspacing="0">
						<tr>
							<td>
								 
							</td>
						</tr>
						<tr>
							<td>
								3
							</td>
						</tr>
						</tr>
							<td>
								5
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

Xoce · March 12, 2010

Great Rash,

нет, это не то ))

дело в том что строчка с ячейками 1 и 3 -- это необходимое условие. Для подсветки и для растягивания данными, я про это написал.

Ваш вариант можно дивами сделать...

Xoce · March 12, 2010

map,

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

поскольку я не могу знать высоту ячейки с rowspan, то и высчитать место отступа тоже не смогу.

map · March 12, 2010

map,
абсолютно позиционированный слой не могу я использовать, т.к. после этой таблицы идут другие элементы дизайна...
поскольку я не могу знать высоту ячейки с rowspan, то и высчитать место отступа тоже не смогу.

да и ладно, таблицу пихай в слой фикс высоты - overflow: auto;

rowspan убрать вообще...в строках только основные данные - инфа в скрытиы слой

появится скрол...сделать по событию onmouseover на строке таблицы - показ слоя с инфой...по onmouseout слой гасить

не вариант?

Xoce · March 12, 2010

map,

сложно... ))

легче повесить на онЛоад на боди, с высчитыванием высоты в пикселях ячейки с rowspan... чего тоже не хочется делать, ибо яваСкрипт меня убивает ))

Edited March 12, 2010 by Xoce

Sign In

rowspan отменяет высоту ячеек в ie. можно это обойти?

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information