html - CSS 表格 TH 元素在 Firefox 中不是粗体(但在 IE 中可以)

Question

您好，我有一个表格，我想在左侧以粗体显示标题，在顶部以粗体显示标题。

标题在 IE 中是粗体，但在 Firefox 中不是。网站在这里:demo link

代码如下。

我做错了什么以及如何在 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 &amp; 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;
}

Answer 1

我还没有足够的声誉来发表评论，所以我会把它们放在这里。

我使用的是 FF 10，左侧的行标题(网络空间、带宽等)显示为粗体。字体没有列标题上的那么大，但绝对是粗体。