嗨,我有一个表格,我想以粗体显示左侧的标题,并以粗体显示顶部的标题。
标题在 IE 中是粗体,但在 Firefox 中不是。网站在这里:演示链接
代码如下。
我做错了什么,如何使 FF 中的元素加粗?
谢谢,
克里斯
HTML
<h2>Compare plans</h2>
<table class="compare-products">
<colgroup>
<col class="col1"/>
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
</colgroup>
<tr class="plan-headers">
<th></th>
<th>Starter</th>
<th>Business</th>
<th>Advanced</th>
<th>Dedicated</th>
</tr>
<tr class="recommended-for">
<td></td>
<td>Ideal start for static websites</td>
<td>Fast hosting for dynamic CMS websites</td>
<td>Custom configurations and high traffic sites</td>
<td>Dedicated resources for intensive work loads</td>
</tr>
<tr class="feature" title="">
<th scope="row">Web space</th>
<td>50MB</td>
<td>1GB</td>
<td>15GB</td>
<td>250GB</td>
</tr>
<tr class="feature" title="">
<th scope="row">Bandwidth</th>
<td>1GB</td>
<td>30GB</td>
<td>1TB</td>
<td>10TB</td>
</tr>
<tr class="feature" title="">
<th scope="row">Websites</th>
<td>1</td>
<td>2</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr class="feature" title="">
<th scope="row">CPU</th>
<td>Shared</td>
<td>Shared</td>
<td>1.2GHz</td>
<td>2.4GHz</td>
</tr>
<tr id="captchaFeature" class="feature" title="">
<th scope="row">Memory</th>
<td>Shared</td>
<td>Shared</td>
<td>1GB</td>
<td>4GB</td>
</tr>
<tr class="feature" title="">
<th scope="row">IP Addresses</th>
<td>Shared</td>
<td>Shared</td>
<td>2</td>
<td>8</td>
</tr>
<tr class="feature" title="">
<th scope="row">Zend Framework</th>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
</tr>
<tr class="feature" title="">
<th scope="row">cPanel/WHM</th>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
</tr>
<tr class="feature" title="">
<th scope="row">PHP/Python/Ruby</th>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
</tr>
<tr class="feature" title="">
<th scope="row">RAID Storage</th>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
</tr>
<tr class="feature" title="">
<th scope="row">DELL Hardware</th>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
</tr>
<tr class="feature" title="">
<th scope="row">99.9% Uptime</th>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
</tr>
<tr class="feature" title="">
<th scope="row">24/7 Support</th>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
<td><div class="yes">Yes</div></td>
</tr>
<tr class="feature" title="">
<th scope="row">IMAP/POP3 Accounts</th>
<td>5</td>
<td>25</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr id="manageFeature2" class="feature" title="">
<th scope="row">FTP Accounts</th>
<td>1</td>
<td>5</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr class="feature" title="">
<th scope="row">Offsite Backup</th>
<td>-</td>
<td>1GB Weekly</td>
<td>10GB Daily</td>
<td>100GB Daily</td>
</tr>
<tr class="feature" title="">
<th scope="row">MySQL Databases</th>
<td>-</td>
<td>2</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr class="feature" title="">
<th scope="row">Subdomains</th>
<td>-</td>
<td>2</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr id="dedicatedFeature" class="feature" title="">
<th scope="row">SSL Certificate</th>
<td>-</td>
<td>-</td>
<td>Optional</td>
<td>Optional</td>
</tr>
<tr class="feature" title="">
<th scope="row">ASP & MSQL</th>
<td>-</td>
<td>-</td>
<td>Optional</td>
<td>Optional</td>
</tr>
<tr class="signup">
<th scope="row"></th>
<td>Sign Up</td>
<td>Sign Up</td>
<td>Sign Up</td>
<td>Sign Up</td>
</tr>
<tr class="faq-links">
<th scope="row">Learn more</th>
<td>Starter Plan FAQ</td>
<td>Business FAQ</td>
<td>Advanced FAQ</td>
<td>Dedicated FAQ</td>
</tr>
</table>
CSS
compare-products .col1
{
width: 20%;
}
.compare-products .col2
{
width: 20%;
}
.compare-products .col3
{
width: 20%;
}
.compare-products .col4
{
width: 20%;
}
.compare-products .col5
{
width: 20%;
}
.compare-products tr td
{
text-align: center;
}
.compare-products tr th[scope=row]
{
text-align: right;
border-bottom: 1px dotted #dddddd;
font-weight: bold;
}
.compare-products tr td
{
border-bottom: 1px dotted #dddddd;
padding: 5px 10px 5px 10px;
}
.compare-products tr.plan-headers th
{
font-size: 20px;
font-weight: bold;
border: none;
padding: 5px 5px 5px 5px;
text-align: center;
}
.compare-products tr.feature th
{
font-weight: bold;
}
.compare-products tr.recommended-for td
{
border: none;
padding: 5px 10px 10px 5px;
text-align: center;
}
.compare-products tr td div.yes, .compare-products tr td div.no, .compare-products tr td div.partial {
height: 16px;
text-indent: -9999px;
}
.compare-products div.yes {
background: url(images/yes.png) no-repeat center center;
}
.compare-products div.no {
background: url(images/no.png) no-repeat center center;
}
.compare-products div.partial {
background: url(images/partial.png) no-repeat center center;
}