Подсвечивание строк таблицы без js

Scrum · November 2, 2007

Как и было обещано. Основываеться на принципе работы выпадающего меню без использования js (http://forum.htmlbook.ru/index.php?showtopic=6181)

Единственный минус, таблица должна быть фиксированной ширины.

<!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>

<style type="text/css">
/*<![CDATA[*/

 table {
 border-collapse: collapse;
 width: 800px;
 table-layout: fixed;
 }
 td {
 border: 1px solid orange;
 }

 a td {
 padding: 0 10px;
 }
 a {
 color: #3366CC;
 text-decoration: none;
 }
 a:hover {
 background-color: #FFFF99;
 }
 tr:hover {
 background: #FFFF99;
 }


/*]]>*/
</style>

 <title></title>
</head>

<body>
 <a href="#"><!--[if ie 7]><!--></a><!--<![endif]-->

 <table>
 <tr>
 <td>Lorem</td>

 <td>Lorem</td>

 </tr>
 </table><!--[if lte ie 6]></a><![endif]-->
 <a href="#"><!--[if ie 7]><!--></a><!--<![endif]-->

 <table>
 <tr>
 <td>gggg</td>

 <td>gggg</td>

 </tr>
 </table><!--[if lte ie 6]></a><![endif]-->
 <a href="#"><!--[if ie 7]><!--></a><!--<![endif]-->

 <table>
 <tr>
 <td>gggg</td>

 <td>gggg</td>

 </tr>
 </table><!--[if lte ie 6]></a><![endif]-->
 <a href="#"><!--[if ie 7]><!--></a><!--<![endif]-->

 <table>
 <tr>
 <td>gggg</td>

 <td>gggg</td>

 </tr>
 </table><!--[if lte ie 6]></a><![endif]-->
</body>
</html>

Maslakoff · November 4, 2007

прикооолл.... за что я люблю кодеров, так это за небольшие извращения))

Vlad · November 5, 2007

Для IE7 и остальных браузеров код можно сделать проще, на основе hover для TR.

Sign In

Подсвечивание строк таблицы без js

Recommended Posts

Scrum

Link to comment

Share on other sites

Maslakoff

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Обсуждения

Forums

Important Information