<!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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<style>
body{
/* background-color:#ffe1ff; /* work */
/* -pie-background: linear-gradient(90deg, #f0f0f0, #ffe1ff);
behavior: url(pie.htc); /* don't work so I have to create #backgrnd */
}
#backgrnd{
width:400px;
height:600px;
/* background-color:#ddddff; /* With this solution pie-background in .hilite doesn't work anymore */
/**/ -pie-background: linear-gradient(90deg, #f0f0f0, #ffe1ff);
behavior: url(pie.htc); /* With that the scrolls doesn't work anymore */
}
.tableScroll{
width:100px;
height:100px;
overflow:auto;
}
table{
border-collapse: collapse;
}
.tableClass tr:hover td{
/**/ background-color:#e4e7f8; /* work */
/* -pie-background: linear-gradient(90deg, #f0f0f0, #00ff40);
behavior: url(pie.htc); /* don't work */
}
.hilite{
/* background-color:#fdddff; /* work */
/**/
-pie-background: linear-gradient(90deg, #f0f0f0, #ff80ff);
behavior: url(pie.htc); /* works only when 1).tableClass tr:hover is not happening 2) there is no backround is a parent*/
}
</style>
<body>
<div id="backgrnd">
<div class="tableScroll">
<table class="tableClass" id="tableId">
<tr>
<th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
</table>
</div>
</div>
<!---->
</body>
<script>
$(document).ready(main);
function main(){
$('#tableId tr').click(toggleRow);
}
function toggleRow(){
$(this).toggleClass('hilite');
}
</script>
</html>
Forums
