5

私はCSSの専門家ではないので、これは少しイライラします。リピーターで満たされたグリッドがあります。行を視覚的に区切るために、各行の下部に 1 ピクセルの境界線を設定します。また、テーブルの両側に濃い灰色の境界線が必要です。このテーブルには次の CSS を使用します。

        #repeaterTable
        {
            border-left: 1px solid #A3A3A3; 
            border-right: 1px solid #A3A3A3;
            border-collapse: collapse;
        }
        repeaterTable.td
        {
            border-bottom: 1px solid white; 

        }

FF (テーブルの右端の SS) でこの結果を取得しています。

代替テキスト

そしてIE8でこれ：

代替テキスト http://img412.imageshack.us/img412/7092/borderie.png

私が必要とするのは、行の境界線ごとに改行するのではなく、暗い灰色の境界線を塗りつぶしたままにすることです。テーブルには 2 つの列がありますが、cellspacing は 0px であるため、tr に border-bottom を設定すると連続した境界線が作成されます。これを機能させるためにcssにいくつかの変更を提案できる人はいますか?

4

2 に答える 2

9

あなたが望む効果を得るためにこれを試してください：

#repeaterTable
{
    border-left: 1px solid #A3A3A3; 
    border-right: 1px solid #A3A3A3;
    border-collapse:collapse;
    border-spacing:0px;
    background-color:#ccc;
}
#repeaterTable td:first-child 
{             
    border-left: 1px solid #A3A3A3;  
}
#repeaterTable td:last-child 
{             
    border-right: 1px solid #A3A3A3;  
}
#repeaterTable td
{
    border-bottom: 1px solid white; 
}

IE8 および FF で次のマークアップを使用してテスト済み (Chrome/Safari では機能しません :( )。

<table id="repeaterTable">
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
</table>
于 2010-01-12T19:55:41.947 に答える
3

このCSSを使用すると、IE / Safari / FF/Chromeで希望するように表示されます。問題は境界線の崩壊であり、それが白い境界線がテーブルの境界線に続く原因となっています。それを削除して（そしてcellpadding="0"とcellspacing="0"に追加し直して）、このCSSを使用する場合：

#repeaterTable
{
    border-left: 1px solid #A3A3A3; 
    border-right: 1px solid #A3A3A3;
    background: #CCC;
}
#repeaterTable td
{
    border-bottom: 1px solid white;
}
#repeaterTable td.last
{
    border-bottom: 0px;
}

このHTMLの場合：

<table id="repeaterTable" cellpadding="0" cellspacing="0">
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td class="last">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
</table>

それは動作します。

CSSで：last-childを使用できますが、古いブラウザー（IE7 / etc）ではサポートされていないため、そこでは間違って表示されます。あなたがどれだけ互換性を持ちたいかによります。その代わりに、「最後の」クラスを使用しました。

または、テーブルを左右の境界線を持つDIVでラップするだけで、行の境界線だけを気にする必要があり、折りたたみを使用できます。

于 2010-01-12T20:00:27.567 に答える