Is there a way to create a white space around the background color of a table cell using CSS? My current code has the background color extend all the way to the edge, and padding only affects the content, not the background color.
#main-monitor {
width: 100%;
}
#main-monitor td, #main-monitor th {
border: 3px solid #999;
padding: 4px;
}
UPDATE: Below is the relevant CSS for these elements. I've made some adjustments but still face the same issue.
#main-monitor {
width: 100%;
}
#main-monitor th {
border: 3px solid #999;
padding: 3px;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
}
#main-monitor td {
background-color: white;
border: 3px solid #999;
margin: 2px;
}
#main-monitor td span {
margin: 5px;
}
This code is applied within a partial view for a table:
<table id="main-monitor">
<thead>
<tr>
<th>
@Html.DisplayNameFor(m => m.Name)
</th>
<th>
@Html.DisplayNameFor(m => m.A)
</th>
<th>
@Html.DisplayNameFor(m => m.B)
</th>
<th>
@Html.DisplayNameFor(m => m.C)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Name</td>
<td style="background-color:@item.AColor"><span>@item.A</span></td>
<td style="background-color:@item.BColor"><span>@item.B</span></td>
<td style="background-color:@item.CColor">@item.C</td>
</tr>
}
</tbody>
</table>