Бекграунд у <tr> и <td>

Great Rash · September 10, 2009

Для начала вот тестовая страница:

<!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=utf-8" />
	<title>test</title>

	<style type="text/css">
		table {
			width: 100%;
			border: 0;
			border-collapse: collapse;
		}

		tr {
			background: #eee;
		}

		td {
			background: none;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<table>
		<tr>
			<td>
				text text text text text text text
			</td>
			<td>
				text text text text text text text
			</td>
			<td>
				text text text text text text text
			</td>
			<td>
				text text text text text text text
			</td>
			<td>
				text text text text text text text
			</td>
		</tr>
	</table>

</body>
</html>

Кому не лень посмотрите ее сначала в Firefox, а потом в ИЕ7 или ниже. И посоветуйте как забороть этот баг?

mishka · September 10, 2009

Конечно всех подробностей незнаю, ксожалению . Но меня всегда учили - на <tr> ничего не прописывать, все писать на <td>.

Почему в твоем случае на <td> нельзя повесить бг?

если убрать с <td> background:none; то работает...

Great Rash · September 10, 2009

В том то и дело, что надо именно и там и там. Это связано с градиентным фоном. В частности по дизайну нужны градиентные бордеры у ячеек таблицы.

Great Rash · September 10, 2009

Блин какое же ГЭ этот гребаный эксплорер!

Нашел лекарство! Кому интересно: нужно всего-лишь добавить position: relative; к стилю <tr>.

Вот рабочий код:

<!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=utf-8" />
	<title>test</title>

	<style type="text/css">
		table {
			width: 100%;
			border: 0;
			border-collapse: collapse;
		}

		tr {
			position: relative; /* капец!!! */
			background: #eee;
		}

		td {
			background: none;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<table>
		<tr>
			<td>
				text text text text text text text
			</td>
			<td>
				text text text text text text text
			</td>
			<td>
				text text text text text text text
			</td>
			<td>
				text text text text text text text
			</td>
			<td>
				text text text text text text text
			</td>
		</tr>
	</table>

</body>
</html>

Sign In

Бекграунд у <tr> и <td>

Question

Great Rash

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

mishka

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information