2017-09-13 66 views
0

下面是中使用的CSS类:CSS类没有得到应用到表行

.table-striped>tbody>tr:last-child>td, 
.table-striped>tbody>tr:last-child>th>.total_row_dark { 
    background-color: #76767b !important; 
    color: #fff; 
    font-weight: 700; 
} 

tr.campare_row span { 
    background-color: #76767b; 
    border-radius: 5px; 
    color: #ffffff !important; 
    display: inline-block; 
    font-weight: bold; 
    margin: 3px; 
    padding: 6px 18px; 
    font-size: 16px; 
    border: 1px solid #ffffff; 
} 

.campare_row>td { 
    vertical-align: middle!important; 
} 

这些类都应该在这里被用于以下表行:

<tr class="campare_row total_row_dark" ng-repeat="location in vm.rwsTableData | filter : 'Summary'" ts-repeat> 
    <td> </td> 
    <td class="text-left">{{location.locationName}}</td> 
    <td class="text-right light-blue">{{(location.waterDemand == vm.constant.NO_WATER_SUPPLY)?'-':location.waterDemand | number:2}}</td> 
    <td class="text-right light-blue">{{(location.waterSupply == vm.constant.NO_WATER_SUPPLY)?'-':location.waterSupply | number:2}}</td> 
    <td class="text-right light-blue" ng-if="location.waterDemand != vm.constant.NO_WATER_SUPPLY && location.waterDeficit != vm.constant.NO_WATER_SUPPLY">{{(location.waterDeficit == vm.constant.NO_WATER_SUPPLY)?'-':location.waterDeficit | number:2}} ({{(location.waterDemand != 0)?((location.waterDeficit*100)/location.waterDemand):0 | number:2}}%)</td> 
    <td class="text-right light-blue" ng-if="location.waterDemand == vm.constant.NO_WATER_SUPPLY || location.waterDeficit == vm.constant.NO_WATER_SUPPLY">{{(location.waterDeficit == vm.constant.NO_WATER_SUPPLY)?'-':(location.waterDeficit | number:2)}}</td> 
    <td class="text-right light-orange">{{vm.getStressValue(location.locationStressIndicator)}}</td> 
    <td class="text-right light-orange">{{location.impactedPopulation | number}}</td> 
    <td class="text-right light-blue">{{location.numOfTankersAsOfToday | number}}</td> 
    <td class="text-right light-blue">{{location.numOfTankersForToday | number}}</td> 
    <td></td> 
</tr> 

根据类的描述,表中的最后一行应分别改为所提到的背景颜色,文本颜色和字体权重。但它并没有改变,最后一行是整个桌子的颜色。如何解决这个问题?

+0

你可以显示什么表结构吗? –

+1

它的确如此小提示所示:https://jsfiddle.net/4tvovto7/1/ - 你能向我们展示结果表吗?你错过了课程名称?或者tbody? – lumio

+0

请给我们一个完全可重复的例子...我们也需要

Salketer

回答

0

这会为最后一排

.table-striped>tbody>tr:last-child>td, 
 
.table-striped>tbody>tr:last-child>th>.total_row_dark { 
 
    background-color: #76767b !important; 
 
    color: #fff; 
 
    font-weight: 700; 
 
} 
 

 

 
tr.campare_row:last-child { 
 
    background-color: #76767b; 
 
    border-radius: 5px; 
 
    color: #ffffff !important; 
 
    display: inline-block; 
 
    font-weight: bold; 
 
    margin: 3px; 
 
    padding: 6px 18px; 
 
    font-size: 16px; 
 
    border: 1px solid #ffffff; 
 
} 
 
.campare_row>td { 
 
    vertical-align: middle!important; 
 
}
<table> 
 
<tr class="campare_row total_row_dark" ng-repeat="location in vm.rwsTableData | filter : 'Summary'" ts-repeat> 
 
    <td> </td> 
 
    <td class="text-left">{{location.locationName}}</td> 
 
    <td class="text-right light-blue">{{(location.waterDemand == vm.constant.NO_WATER_SUPPLY)?'-':location.waterDemand | number:2}}</td> 
 
    <td class="text-right light-blue">{{(location.waterSupply == vm.constant.NO_WATER_SUPPLY)?'-':location.waterSupply | number:2}}</td> 
 
    <td class="text-right light-blue" ng-if="location.waterDemand != vm.constant.NO_WATER_SUPPLY && location.waterDeficit != vm.constant.NO_WATER_SUPPLY">{{(location.waterDeficit == vm.constant.NO_WATER_SUPPLY)?'-':location.waterDeficit | number:2}} ({{(location.waterDemand != 0)?((location.waterDeficit*100)/location.waterDemand):0 | number:2}}%)</td> 
 
    <td class="text-right light-blue" ng-if="location.waterDemand == vm.constant.NO_WATER_SUPPLY || location.waterDeficit == vm.constant.NO_WATER_SUPPLY">{{(location.waterDeficit == vm.constant.NO_WATER_SUPPLY)?'-':(location.waterDeficit | number:2)}}</td> 
 
    <td class="text-right light-orange">{{vm.getStressValue(location.locationStressIndicator)}}</td> 
 
    <td class="text-right light-orange">{{location.impactedPopulation | number}}</td> 
 
    <td class="text-right light-blue">{{location.numOfTankersAsOfToday | number}}</td> 
 
    <td class="text-right light-blue">{{location.numOfTankersForToday | number}}</td> 
 
    <td></td> 
 
</tr> 
 
</table>

0

工作,因为我看到你正在使用的引导table-striped,也许它的风格将覆盖您的自定义样式。所以要确保添加!important并检查它是否显示。 (使用!重要的是不是很好的练习一般)