html - CSS 无法在 Chrome 和 Firefox 中正确显示

Question

我在浏览器中无法正确显示我创建的表格的某些样式时遇到问题。特别是我创建的类 .rowB 背景颜色未显示，以及我为类 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 &amp; 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 &amp; 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>

网页: http://benefitsatbenefitelect.com/new/index.php/portfolio-item/dark-places/

CSS文件: 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;
}

更改您的 .rowA 和 .tableFooter 未在 {} 中正确关闭...