css - Highlight part of a table row -
i have table has rows alternate colors, when hover on rows highlighted yellow.
i of rows highlighted time too(not onhover). have discovered of rows highlighted right next each other , gives effect that part of table yellow , doesn't good.
i want know if possible create small strip of highlighting through middle of row while outsides remain natural color.
this have:
.resulttable tbody tr:nth-child(2n+1){ background-color:white; } .resulttable tbody tr:nth-child(2n){ background-color:#e6ebec; } .resulttable tbody tr:nth-child(n):hover{ background-color: yellow; } .highlightedrow{ background-color:#f2f18d !important; }
this want:
update:
i cant seem border method work.
this closest there space between borders.
.resulttable{ text-align:center; width: 100%; padding: 0px; margin: 0px; } .resulttable thead{ background-color: #000099; color: white; font-size:22px; font-weight:bold; } .resulttable caption{ background-color: #000099; color: white; font-size:22px; font-weight:bold; } .resulttable tbody tr:nth-child(2n+1){ background-color:white; border-top:2px solid green; border-bottom:2px solid green; } .resulttable tbody tr:nth-child(2n){ background-color:#e6ebec; border-top:2px solid red; border-bottom:2px solid red; } .resulttable td{ border:inherit; } .resulttable tbody tr:nth-child(n):hover{ background-color: yellow !important; } .highlightedrow{ background-color:#f2f18d !important; }
gives me:
by way: made them red , green on purpose spot problem.
set border-width: 3px;
or , set border-color: #fff;
want.
in other words, can't set part of row color, unless use image background. can color borders.
Comments
Post a Comment