CSS not showing correctly in Chrome & Firefox - html

Question

I am having issues with certain styles not showing correctly in browsers for tables that I created. Specifically the class I created .rowB background color not showing as well as the right side border that I created for class cellBrdrRght.
#charset "UTF-8";
/* CSS Document */
/* info charts */
td{
vertical-align: middle;
}
.chartHeader{
background-color: #115967!important;
color: #fff;
text-align: center;
font-weight: bold;
}
.rowA{
background-color: #d0d0d0!important;
color: #4b4b4b;
.rowB{
background-color: #666666!important;
color: #fff;
}
.cellBrdrRght {
border-style: solid!important;
border-width: 0px 1px 0px 0px!important;
border-color: white!important;
}
.cellnoBrd {
border-style: none;
}
.tableFooter{
font-size: 10px;
border-style: none;
background-color: #115967!important;
color: #fff;
text-align: left;
colspan: 3;
a:sideBar {
background-color: #115967!important;
padding: 25px 50px 75px 100px;
color: #fff;
}
<link href="http://benefitsatbenefitelect.com/new/wp-content/styles/other-styles.css" rel="stylesheet" type="text/css">
<div style="overflow-x: auto;">
<table>
<tbody>
<tr class="chartHeader">
<td class="cellBrdrRght">Plan Benefits</td>
<td class="cellnoBrd" colspan="2">Current Benefits</td>
</tr>
<tr class="rowA">
<td class="cellBrdrRght">Description</td>
<td class="cellBrdrRght">PPO</td>
<td class="cellnoBrd">HDHP</td>
</tr>
<tr class="rowB">
<td class="cellBrdrRght" style="text-align:left;"><b>Deductible</b> In/Out-of-Network & 2x Family</td>
<td class="cellBrdrRght">$1,250/$2,250**</td>
<td class="cellnoBrd">$3,000/$6,000**</td>
</tr>
<tr class="rowA">
<td class="cellBrdrRght" style="text-align:left;"><b>Coinsurance</b> In/Out-of-Network</td>
<td class="cellBrdrRght">Alaska Plan 20%/20%<br> Non-Alaska Plan 20%/40%</td>
<td class="cellnoBrd">Alaska Plan 20%/20%<br> Non-Alaska Plan 20%/40%</td>
</tr>
<tr class="rowB">
<td class="cellBrdrRght" style="text-align:left;"><b>Out-of-Pocket Maximum</b> In/Out-of-Network & 2x Family</td>
<td class="cellBrdrRght">$5,000/$10,000</td>
<td class="cellnoBrd">$5,000/$10,000</td>
</tr>
<tr class="rowA">
<td class="cellBrdrRght" style="text-align:left;"><b>Primary/Specialist Office</b></td>
<td class="cellBrdrRght">$30 PCP/$40 Specialist</td>
<td class="cellnoBrd">Alaska Plan*: PCP 20%/20% Specialist 20%/20%<br> Non-Alaska Plan*: PCP 20%/40% Specialist 20%/40%</td>
</tr>
<tr class="rowB">
<td class="cellBrdrRght" style="text-align:left;"><b>Retail Prescriptions</b>Generic/Preferred/Non-Preferred</td>
<td class="cellBrdrRght">$20/$45/$60</td>
<td class="cellnoBrd">20%*</td>
</tr>
<tr class="tableFooter">
<td colspan="3">*After Deductible is met **Individuals in Family Tier need only meet individual deductible vs. family deductible</td>
</tr>
</tbody>
</table>
<hr/>
</div>
web page:
http://benefitsatbenefitelect.com/new/index.php/portfolio-item/dark-places/
css file:
http://benefitsatbenefitelect.com/new/wp-content/styles/other-styles.css

Answer 1

#charset "UTF-8";
/* CSS Document */
/* info charts */
td{
vertical-align: middle;
}
.chartHeader{
background-color: #115967 !important;
color: #fff;
text-align: center;
font-weight: bold;
}
.rowA{
background-color: #d0d0d0 !important;
color: #4b4b4b;
}
.rowB{
background-color: #666666 !important;
color: #fff;
}
.cellBrdrRght {
border-style: solid !important;
border-width: 0px 1px 0px 0px !important;
border-color: white !important;
}
.cellnoBrd {
border-style: none;
}
.tableFooter{
font-size: 10px;
border-style: none;
background-color: #115967 !important;
color: #fff;
text-align: left;
colspan: 3;
}
a:sideBar {
background-color: #115967 !important;
padding: 25px 50px 75px 100px;
color: #fff;
}
Change this your .rowA & .tableFooter is not closed properly in {}...

Answer 2

You missed closing tags in .rowA:
.rowA{
background-color: #d0d0d0!important;
color: #4b4b4b;
}
and in .tableFooter:
.tableFooter{
font-size: 10px;
border-style: none;
background-color: #115967!important;
color: #fff;
text-align: left;
colspan: 3;
}
Try this and it should properly work