Issue
Screenshot 1
Screenshot 2
I am currently stuck on a css issue. Basically I have defined a style rule like this:
#divMyList tbody tr td{
cursor:pointer;
border-right:5px solid white;
padding:10px;
width:200px;
}
I'm applying another class named tmenu
on my td
in the <div>
like this:
<td class="tmenu"> foo </td>
so that it inherits all the color and other combinations from along with my overridden styles in #divMyList tbody tr td
I mentioned above. This is working fine for me.
Now, I want to implement the selected style of tmenu
to my current <td>
element so that when someone clicks on it, it inherits the selected style of tmenu
class. The tmenu
and its selected styles are defined like this:
.tmenu {
width: 100%;
height: 40px;
font-size: 14px;
font-weight: normal;
}
.tmenu ul li {
/* ..... */
}
.tmenu ul li.selected {
cursor: default;
}
When I do like this:
<td class="tmenu selected">foo</td>
it doesn't apply the rules of the selected class to my td element. Any help on what I'm doing wrong. Do I need another rule mixing all of these in a new class?
Solution
the way you have defined your table, your css should look like this
#divMyList tbody tr td{
cursor:pointer;
border-right:5px solid white;
padding:10px;
width:200px;
}
.topmenu {
width: 100%;
height: 40px;
font-size: 14px;
font-weight: normal;
}
.topmenu td.selected{
cursor: default!important;
}
I have put together a fiddle and added a color to show that it is getting styled
Answered By - Rachel Gallen
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.