1

こんにちは、左側のヘッダーを太字で、上部のヘッダーを太字で表示したいテーブルがあります。

ヘッダーは 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 &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;
}
4

1 に答える 1

1

まだコメントできるほど評判が良くないので、ここに載せておきます。

FF 10 を使用していますが、左側の行ヘッダー (Web スペース、帯域幅など) が太字で表示されています。フォントは列ヘッダーほど大きくはありませんが、間違いなく太字です。

于 2012-05-01T21:39:53.547 に答える