1

列の背景色が交互に変わるテーブルを作成するプロジェクトを依頼されました。これは、各 td で決定される「チェック済み」の背景を保持しながら、他の列にまたがる必要がある行がいくつかあることを除いて、すべて問題ありません。

jsfiddleまたはコードを参照してください。

body {
    font-family:Calibri, Trebuchet MS, Verdana, Tahoma, sans-serif;
}
table {
    border:1px solid #444;
    text-align:center;
}
th, td {
    width:200px;
    padding:2px;
}
.lg {
    background-color:#eee;
}
.dg {
    background-color:#ddd;
}
}

対応するhtml:

<table>
    <tr>
        <th>Fruits</th>
        <td class="lg">Peach</td>
        <td class="dg">Blueberry</td>
        <td class="lg">Apple</td>
    </tr>
    <tr>
        <th>Chocolate</th>
        <td class="lg">Chocolate-Chip</td>
        <td class="dg">Double Chocolate</td>
        <td class="lg">Turtle</td>
    </tr>
    <tr>
        <th>Peanut Butter</td>
            <td colspan="3">Peanut Butter Swirl and a long list of items</td>
    </tr>
    <tr>
        <th>Classics</th>
        <td class="lg">Chocolate</td>
        <td class="dg">Vanilla</td>
        <td class="lg">Strawberry</td>
    </tr>
</table>

現在、列にまたがる td でこの効果を複製するために挿入した背景画像があります。唯一の問題は、どのように試しても (結果のスクリーン キャップを取得するなど)、これが完全に一致しないことです。これは固定幅のテーブルであることに注意してください。正直なところ、Opera を除いて、それらのすべてにかなり近いです。

これを一貫して行う方法はありますか？

4

1 に答える 1

3

これは本当に難しい問題です。これはすぐに使える種類のソリューションであり、機能する場合と機能しない場合があります。colspan3 セルに線形の「勾配」が含まれますが、次のものが必要です。

  • 列の特定の幅 (サンプル コードでは 200px に存在していました)
  • 実際にその幅に対応できるテーブル (私の例のように、最小幅は 800px です)
  • グラデーションにセルのパディングを含めるか、それらを削除します（私の例のように）

colspan-cell のクラスを使用して、html がわずかに更新されました。

<td class="fullspan" colspan="3">Peanut Butter Swirl and a long list of items</td>

CSS には、Gradient Generatorを使用してこれが追加されています。

.fullspan {
    background: #eee; /* Old browsers */
    background: -moz-linear-gradient(left,  #eee 0%, #eee 200px, #ddd 200px, #ddd 400px, #eee 400px); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eee), color-stop(200px,#eee), color-stop(200px,#ddd), color-stop(400px,#ddd), color-stop(400px,#eee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #eee 0%,#eee 200px,#ddd 200px,#ddd 400px,#eee 400px); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #eee 0%,#eee 200px,#ddd 200px,#ddd 400px,#eee 400px); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #eee 0%,#eee 200px,#ddd 200px,#ddd 400px,#eee 400px); /* IE10+ */
    background: linear-gradient(to right,  #eee 0%,#eee 200px,#ddd 200px,#ddd 400px,#eee 400px); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee', endColorstr='#eee',GradientType=1 ); /* IE6-9 */
}

Operaを含む最新のブラウザでこのようなものを与える：

グラデーション ハック レンダリング

于 2013-02-19T22:21:58.833 に答える