CSS border у TR

Deflate_ · January 13, 2008

Народ, а че за фигня, не подскажите - не работает сие свойство у TR?

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

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

Благодарю... (_*_)

D.S.Denton · January 13, 2008

Рамка показывается, когда установлен параметр border с ненулевым значением у тега .

Deflate_ · January 13, 2008

неа...

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<meta http-equiv="Content-Language" content="ru" />
	<style>
		.tbl tr {
			border:8px solid #123456;
			background:#cccccc;
		}
	</style>
</head>
<body>
<div id="content">
	<table class="tbl" border="1">
		<tr>
			<td>1</td>
   			<td>1</td>
   			<td>1</td>
		</tr>
		<tr>
			<td>2</td>
   			<td>2</td>
   			<td>2/td>
		</tr>
		<tr>
			<td>3</td>
   			<td>3</td>
   			<td>3</td>
		</tr>
	</table>
</div>
</body>
</html>

Deflate_ · January 13, 2008

кароче дела обстоят так, добавим-ка, к этому коду еще вот такой стиль :

	.tbl {border-collapse:collapse;}

работает везде, кроме шестого осла, осел, как обычно козлится.... и что терерь делать спрашивается?

Есть какие идеи? Варианты?

D.S.Denton · January 13, 2008

мм... http://forum.htmlbook.ru/index.php?showtopic=7070

меняем стили:

<style type="text/css">
table.zebra {
  width: 100%; /* Ширина таблицы */
  border-collapse: collapse; /* Убираем двойные линии между ячеек */
}

table.zebra tbody tr td {
  border-top:3px dotted gainsboro; /* четные строки */
  /* border-bottom:... нижняя граница...если нужна*/
}
table.zebra tbody tr.odd td {
  border-top: 2px solid lime; /* аналогично нечетные строки */
}
</style>

Deflate_ · January 13, 2008

мм... http://forum.htmlbook.ru/index.php?showtopic=7070

меняем стили:

<style type="text/css">
table.zebra {
  width: 100%; /* Ширина таблицы */
  border-collapse: collapse; /* Убираем двойные линии между ячеек */
}

table.zebra tbody tr td {
  border-top:3px dotted gainsboro; /* четные строки */
  /* border-bottom:... нижняя граница...если нужна*/
}
table.zebra tbody tr.odd td {
  border-top: 2px solid lime; /* аналогично нечетные строки */
}
</style>

С TD то, конечно, все понятно, но и неинтересно, к тому же таким способом можно сделать только верхний и нижний бордер, но не выделить всю строку таблицы целиком, что есть очень обломно.

Я всего лишь хотел тупо сделать рамку у TR, обычными средствами CSS...

Ну что? неужель JavaScript последняя инстанцыа?

Vlad · January 14, 2008

Есть еще THEAD, его можно использовать, хотя и не удобно. Все-таки мне кажется, стоит поиграться со стилями, применительно к TD и получить через CSS нужный результат. JavaScript использовать для рисования рамок это чересчур.

Deflate_ · January 14, 2008

не... THEAD не годится, сами понимаете - это не то... =)

есть идея, сделать стилем верхний и нижний бордер у всех TD в TR, также у first-child TR'a (первый TD в строке) сделать левый бордер, но вот, с последним TD так не получиться... а жаль... Жаль, что нет селектора last-child...

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

хз... извращение какое-то...

Eugene1 · January 18, 2008

А так?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<style type="text/css">>
table {border: 0; border-collapse: collapse;}
.sel td {border:0; border-bottom:1px solid black; border-top:1px solid black;}
.sel td.f {border-left:1px solid black;}
.sel td.l {border-right:1px solid black;}
</style>
</head>
<BODY>
<table width=100%>
<tr>
<td>1<td>2<td>3
<tr class="sel">
<td class="f">4<td>5<td class="l">6
<tr>
<td>7<td>8<td>9
</table>
</BODY>
</HTML>

Deflate_ · January 19, 2008

А так?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<style type="text/css">>
table {border: 0; border-collapse: collapse;}
.sel td {border:0; border-bottom:1px solid black; border-top:1px solid black;}
.sel td.f {border-left:1px solid black;}
.sel td.l {border-right:1px solid black;}
</style>
</head>
<BODY>
<table width=100%>
<tr>
<td>1<td>2<td>3
<tr class="sel">
<td class="f">4<td>5<td class="l">6
<tr>
<td>7<td>8<td>9
</table>
</BODY>
</HTML>

=) http://www.art-forum.net/index.php?showtopic=53

Sign In

CSS border у TR

Question

Deflate_

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

D.S.Denton

Link to comment

Share on other sites

Deflate_

Link to comment

Share on other sites

Deflate_

Link to comment

Share on other sites

D.S.Denton

Link to comment

Share on other sites

Deflate_

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Deflate_

Link to comment

Share on other sites

Eugene1

Link to comment

Share on other sites

Deflate_

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information