單元格背景

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>