Question

我遇到的问题是某些样式在浏览器中无法正确显示我创建的表格。特别是我创建的类.rowB背景颜色不显示我为类cellBrdrRght创建的右侧边框。

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

网页： 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＆amp; .tableFooter未在{} ...

中正确关闭

Answer 2

您错过了.rowA中的结束标记：

.rowA{
  background-color: #d0d0d0!important;
  color: #4b4b4b;
}

和.tableFooter：

.tableFooter{
  font-size: 10px;
  border-style: none;
  background-color: #115967!important;
  color: #fff;
  text-align: left;
  colspan: 3;
  }

试试这个，它应该正常工作

CSS在Chrome和＆amp ;;中无法正确显示火狐

2 个答案: