Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How to add alternate background style to odd rows?

$
0
0

I'm trying add alternate background style to odd rows in Blazor Fluent Gridit seams that it is not possible out of the box, so I tried with some CSS like

.fluent-data-grid tbody tr:nth-child(odd) {     background: blue !important; }

and

fluent-data-grid-row:nth-child(odd) {    background: blue !important;}

but the HTML generated for the TR does not contain the style

.fluent-data-grid tbody tr:nth-child(odd) {     background: blue !important; }
<table id="f36057591" class="fluent-data-grid grid" style="grid-template-columns: 0.5fr 0.5fr;" aria-rowcount="5" b-ppmhrkw1mj><thead b-ppmhrkw1mj><tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" b-upi3f9mbnn><th col-index="1" class="column-header col-justify-start resizable" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" __internal_preventDefault_oncontextmenu scope="col" aria-sort="none" b-w6qdxfylwy><span class="keycapture"><fluent-button class="col-sort-button" style="width: calc(100% - 20px);" type="button" appearance="stealth" b-x1200685t0><div class="col-title-text" b-pxhtqoo8qd>Rank</div></fluent-button></span><fluent-divider class="resize-handle" role="separator" orientation="vertical"></fluent-divider></th><th col-index="2" class="column-header col-justify-start resizable" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 5;" __internal_preventDefault_oncontextmenu scope="col" aria-sort="none" b-w6qdxfylwy><span class="keycapture"><fluent-button class="col-sort-button" style="width: calc(100% - 20px);" type="button" appearance="stealth" b-x1200685t0><div class="col-title-text" b-pxhtqoo8qd>Group</div></fluent-button></span><fluent-divider class="resize-handle" role="separator" orientation="vertical"></fluent-divider></th></tr></thead><tbody b-ppmhrkw1mj><tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="2" b-upi3f9mbnn><td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" b-w6qdxfylwy>2</td><td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" b-w6qdxfylwy>B</td></tr><tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="3" b-upi3f9mbnn><td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" b-w6qdxfylwy>1</td><td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" b-w6qdxfylwy>A</td></tr><tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="4" b-upi3f9mbnn><td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" b-w6qdxfylwy>4</td><td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" b-w6qdxfylwy>B</td></tr><tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="5" b-upi3f9mbnn><td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" b-w6qdxfylwy>3</td><td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" b-w6qdxfylwy>A</td></tr></tbody><!--Blazor:{"prerenderId":"e4ae64fd5cca496eb7820ea6c5a77cd7"}--></table>

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>