单元格背景

Question

我想基于价值，以表格单元格提供研究背景颜色这是到目前为止，我已经做了：

<style type="text/css"> 
 
    .Scheduled { 
 
     background-color: lime; 
 
    } 
 
    .Completed { 
 
     background-color: lawngreen; 
 
    } 
 

 
    .Completed with error { 
 
     background-color:red ; 
 
    } 
 

 
    .Pending { 
 
     background-color: #ffbf00 ; 
 
    } 
 

 
    
 
</style>

<td class="@item.Status" > 
 
          @Html.DisplayFor(modelItem => item.Status) 
 
         </td>

我想完成错误单元格在红色我该怎么做？我做错了什么？

预期输出：

Answer 1

.Completed with error中的空格使其成为无效的css类名称。

如果班级名称更改为.Completed-with-error，那么它将变为有效。

让我们来解决这个问题：

<td class="@item.Status.Trim().Replace(' ', '-')" > 
    @Html.DisplayFor(modelItem => item.Status) 
</td> 

现在改变你的CSS以及：

<style type="text/css"> 
.Scheduled { 
    background-color: lime; 
} 

.Completed { 
    background-color: lawngreen; 
} 

.Completed-with-error { 
    background-color:red ; 
} 

.Pending { 
    background-color: #ffbf00 ; 
} 
</style> 

瞧！

---

更新时间： 添加.Trim()，清理任何尾随空格。

Answer 2

所以，我首先看到的是.Completed with error这不是有效的CSS类。你不能在css类中有空格。

您需要修改代码，以便该类为.Completed-with-error。在HTML和样式中。

Answer 3

你会发现这个有用的，注意我没有境外台

table { 
 
    border-collapse: collapse; 
 
} 
 

 
table, th, td { 
 
    border: 1px solid #888; 
 
} 
 
td{ 
 
    color: #fff; 
 
    padding: 6px 
 
} 
 
.red{ 
 
    background-color: red; 
 
} 
 
.green{ 
 
    background-color: green; 
 
} 
 
.blue{ 
 
    background-color: blue; 
 
} 
 
.pink{ 
 
    background-color: pink; 
 
}

<table border="1"> 
 
    <tr> 
 
    <td class="red">fjdfk fdfdf</td> 
 
    <td class="green">fjdfk fdfdf</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="blue">fjdfk fdfdf</td> 
 
    <td class="pink">fjdfk fdfdf</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="red">fjdfk fdfdf</td> 
 
    <td class="green">fjdfk fdfdf</td> 
 
    </tr> 
 
</table>