html - Highlight a row on Click not working. CSS precedence -
here's table
in html file. have highlight row on click.
<tbody> <!--display none--> <!--onclick--> <tr ng-repeat="case in lastten" ng-click="setselected(case.name)" ng-class="{selected: case.name === idselected}"> <td colspan="1">{{case.name}}</td> <td colspan="1">{{case.total}}</td> <td colspan="1">{{case.passed}}</td> <td colspan="1">{{case.failed}}</td> </tr> </tbody>
css- initialtable class above table
table.initialtable { table-layout: fixed; width: 100%; font-family: helvetica, arial, sans-serif; margin-top: 20px; margin-bottom: 20px; border-collapse: collapse; border-spacing: 0; } table.initialtable td, th { border: 1px solid transparent; height: 40px; transition: 0.3s; overflow: hidden; } table.initialtable th { font-weight: bold; text-align: center; vertical-align: middle; } table.initialtable td { text-align: center; vertical-align: middle; } table.initialtable tr:nth-child(even) { background: #f3f7fb; } table.initialtable tr:nth-child(odd) { background: #ffffff; } .initialtable tr:hover td { background: #eee; } .selected { background: red; }
here's angular code-
$scope.idselected = null; $scope.setselected = function(idselected) { $scope.idselected = idselected; };
so whenever row selected gets class selected , should highlighted. css not working. precedence of .selected below hover ? tried lot of other combinations , didn't work. important isn't working . i've been stuck @ quite while .
Comments
Post a Comment