Jump to content

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

Scrum

By Scrum,
in Tricks and solutions

 Share

Recommended Posts

Scrum Explorer

Scrum

Posted
Posted

Как и было обещано. Основываеться на принципе работы выпадающего меню без использования 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>

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept