UPDATE. Trying this one

 .table-list > tbody > tr.selected td {
        background: #eaf2f8;
    }    

    .table-list > tbody > tr > td.nodata {
        background-color: lightgray;
        opacity: 0.4;
        filter: alpha(opacity=40); /* For IE8 and earlier */
    }

    .table-list > tbody > tr:nth-child(odd) > td.nodata {
        background-color: darkgray;
        opacity: 0.4;
        filter: alpha(opacity=40); /* For IE8 and earlier */
    }

    .table-list > tbody > tr > td.selected {
        background: #eaf2f8;
        color: blue;
        font-weight: bold;
    }

    .table-list > thead > tr > th.selected {
        background: #eaf2f8;
        color: blue;
    }

.widget .table.table-bordered tr.selected td:first-child {
    border-left: solid 8px #2980b9 !important;
}

but my selected sell is still not visible - may be because there is nothing to select? May be I should say N/A if there is no data?


Hi everybody,

This is what I currently have (and see attached picture how it looks like):

.table-list {
    cursor: pointer;
}

    .table-list > tbody > tr:nth-child(odd) > td {
        background-color: #f1f1f1;
    }    

    .table-list > tfoot {
        font-size: large;
        text-align: right;
    }

    .table-list > tbody > tr.selected td {
        background: #eaf2f8;
    }

    .table-list > tbody > tr > td.selected {
        background: #eaf2f8;
        color: blue;
        font-weight: bold;
    }

    .table-list > tbody > tr > td.nodata {
        background-color: dimgray;
    }

    .table-list > thead > tr > th.selected {
        background: #eaf2f8;
        color: blue;
    }

.widget .table.table-bordered tr.selected td:first-child {
    border-left: solid 8px #2980b9 !important;
}

In my directive I have:

<td ng-repeat="column in wm.columns track by $index"
                ng-click="wm.valueClick(row, column, $index);"
                ng-class="{'selected': $index === wm.selectedIndex && row.valueName===wm.selectedRow, 'nodata':  wm.getCellValue(row, column, 'inventoryId')===null}">
                <span>{{ wm.getCellValue(row, column, wm.selectedField)}}</span>
            </td>

So, two problems:

1. It is not visible that I selected that cell under this dark background.

2. I need the background just slightly darker and probably alternated between odd/even too.

(The User Story says:

Grid cells without a corresponding i_item record (no orange size 36 i_item record exists) should have a darker background, while those with an i_item record should have a white background (mockup above is not styled properly in terms of background).

Would you please suggest how can I fix my css to achieve the appearance I need?

Thanks in advance.