4

Float:right表のセル内に指定​​しdivても、IE では効果がないようです。また、レイヤーのコンテンツを右に揃えるために、特に text-align right を試しましたが、IE 7 では成功しませんでした。

CSS スニペット:

.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}

HTML スニペット:

<td class="workloadcell">
    <div class="workload">
        1
    </div>
</td>

HTML と CSS の両方が検証され、Firefox ではテキストが正しい位置に配置されます。コピーして貼り付けて完全なコードをテストする場合は、次の場所にあります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
        <title>Table Test</title>
        <style type="text/css">
td {
    border: 1px solid black;
}


.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}



div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}
</style>
    </head>



<body>
        <table>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td colspan="4">
                    <div>
                        2008
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <div>
                        Q1
                    </div>
                </td>
                <td>
                    <div>
                        Q2
                    </div>
                </td>
                <td>
                    <div>
                        Q3
                    </div>
                </td>
                <td>
                    <div>
                        Q4
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    workload forecast
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        1
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    actual workload
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        3
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        3
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        3
                    </div>
                </td>
                        </tr>
        </table>
    </body>
</html>

(クラス宣言がいくつかの要素に対して繰り返されるという意味で CSS が最適ではないことはわかっていますが、問題に関連しない場合は、これについてコメントしないでください。)

4

3 に答える 3

5

それはあなたが持っている方法で（またはalexmeiaが提案する方法で）動作するはずです。

しかし、(これは IE です)、ヘッダーQ1、Q2 などは、要求した 14 ピクセルよりも広いテーブル列をプッシュしています。

列は、定義した 14px 内で右揃えされていますが、IE では div が右に移動していません。(列が実際には 14px より広い場合でも、div は定義された 14px 内にとどまります)

これを説明するために、幅を 28px にするか、背景の 1 つの色を変更して、in 内の td と div の違いを示すことができます。

.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6EEE9;
    text-align: right;
    width: 14px;
    float: right;
}

IE の場合の解決策は、幅を定義しないか、ヘッダーに対応できる幅にすることです。

于 2009-03-23T16:33:35.820 に答える
3

div.workload のルールを宣言する必要はありません。このルールのみを使用すると、すべてが正常に機能します。

 td {
    border: 1px solid black;
     }

 .workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 20px;
    height: 16px;
    text-align: right;
    }
于 2009-03-23T16:05:23.127 に答える