Cell Background in html - html

Question

I want to provide backgroud color to table cell based on the value this is what so far i have done:
<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>
i want Complete with error cell to be in Red how can i do it? what i am doing wrong?
expected output:

Answer 1

The spaces in .Completed with error make it an invalid css class name.
If the class name was changed to .Completed-with-error, then it would become valid.
Let's fix this:
<td class="#item.Status.Trim().Replace(' ', '-')" >
#Html.DisplayFor(modelItem => item.Status)
</td>
Now change your CSS as well:
<style type="text/css">
.Scheduled {
background-color: lime;
}
.Completed {
background-color: lawngreen;
}
.Completed-with-error {
background-color:red ;
}
.Pending {
background-color: #ffbf00 ;
}
</style>
Voila!
Updated:
Add .Trim(), to clean up any trailing spaces.

Answer 2

So the first thing that I see is .Completed with error which is not a valid css class. You can't have spaces in a css class.
You'll need to amend the code so the class is .Completed-with-error. Both on the HTML and in the styles.

Answer 3

you may find this useful, notice i dont have border outside table
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>