0

私は非常にエレガントなcssとテーブルであると思ったものを書きました。これは、非常に少ない帯域幅とjavascriptなしでゼブラフォーマットを行いますが、IE9では機能しません.

どのように見えるか:

IE9 以外のすべてのブラウザー

IE9 での表示:

ここに画像の説明を入力

ソースコード：

<!DOCTYPE html>
<html>
<head>
    <title>SQLFlight HD Status</title>
    <style type="text/css">
    table {
        border-collapse:collapse;
        border-spacing:0;               
    }
    th {
        background:black;
        color:white;
    }
    tr:nth-child(odd), col:nth-child(odd) {
        background:rgba(200,200,200,0.5);
    }
    tr:nth-child(even) {
        background:rgba(255,255,255,0.5);
    }
    td,th {
        padding: 4px 10px;
    }
    </style>
    </head>
<body>
    <table>
    <col/><col/><col/><col/><col/><col/>
    <thead>
        <tr>
        <th>Drive</th><th>Label</th><th>Size</th><th>Used</th><th colspan="2">Free</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>C:</td><td>OS</td><td>136 GB</td><td align="right">74 GB</td>
        <td align="right">62 GB</td><td align="right">46 %</td>
        </tr>
        <tr>
        <td>E:</td>
        <td>Data2</td>
        <td>394 GB</td>
        <td align="right">280 GB</td>
        <td align="right">114 GB</td>
        <td align="right">29 %</td>
        </tr>
        <tr>
        <td>F:</td><td>Data3</td><td>164 GB</td><td align="right">100 GB</td><td align="right">64 GB</td><td align="right">39 %</td>
        </tr>
    </tbody>
    </table> 
    </body>
</html>

私は、複雑なマークアップが大量にない、エレガントで低帯域幅のソリューションが好きです。問題は次のスニペットだと思います。

tr:nth-child(odd), col:nth-child(odd) {
    background:rgba(200,200,200,0.5);
}

私がテストしたすべてのブラウザーは、IE9 を除いて、tr と col のスタイリングを組み合わせていると想定していますが、IE9 では tr のスタイリングまたは col のスタイリングのみが許可され、両方を同時に使用することはできません。では、ここで行ったように IE9 でも機能するように、わずか 3 行の CSS で白、ライト グレー、ライト グレーをコーディングする方法はありますか? クラス タグやスタイル タグを大量に HTML に追加する必要もありません。IE9 で失敗しているのは、tr と col の背景スタイルの組み合わせだけだというのは正しいですか? またはIE9で何か他のものが機能していませんか？フィードバック、何が起こっているのかの説明、および簡単な解決策をいただければ幸いです。

ありがとう。

4

1 に答える 1

1

次のようなものを使用できませんか。

tr:nth-child(odd) {
        background:rgba(200,200,200,0.5);
    }
tr:nth-child(odd) td:nth-child(even) {
        background:rgba(200,200,200,0.8);
    }
tr:nth-child(even) td:nth-child(even) {
        background:rgba(255,255,255,0.5);
    }
于 2011-09-27T15:56:59.387 に答える