-3

テーブルが1pxのグリッドのように見えるように、境界線を持つCSSとして作成しました。最初の列は二重枠です。問題は、最後の行の最初の 2 つのセルが二重境界線のために閉じられていないことです。最初の行のセルも閉じるため、テーブルレベルでは境界線を使用できませんが、これは必須ではありません。境界線がないように、最初の行のセルの上の境界線は白に設定されています

box-layout css prop も試しましたが、これと table レベルの border-top でテーブルが導入されます。div に境界線を設定できるように div に追加できることはわかっていますが、テーブル、tr、または td レベルのいずれかに設定されたプロパティを使用して解決できるなど、これを解決する最善の方法を探しています。

以下はテーブルと css です。または、ここで見つけることができます: http://jsfiddle.net/TcQ2j/。

<table class="tblplg sty4">
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                    </tr>
                    <tr>
                        <td>12</td>
                        <td>13</td>
                        <td>24</td>
                        <td>15</td>
                    </tr>
                </tbody>
            </table> 


<style type="text/css">
/*style4*/
.tblplg.sty4  {
    border-collapse:collapse;
    text-align: center;

}

.sty4 td {
         border: 1px solid black;
}

.sty4 td:first-child {
    text-align: left;   
}


.sty4 tr:first-child td{
    border-bottom: double   
}

.sty4 tr:first-child td:first-child{
    border-left: 0px;   
}

.sty4 tr:first-child td{
    border-top: 0px;    
}


.sty4 td:first-child {
         border-right: double;

}

.sty4 tr:last-child td {
         border-bottom: 0px;


}
/*style4*/
</style>
4

1 に答える 1

0

これは最も明確な答えではありませんが、確かに機能します。問題を引き起こしている二重境界線のブラウザーの解釈のように見えるので、テーブルを相対位置に設定し、:after 擬似要素を使用して、テーブルの下部にある行を追加しました。

http://jsfiddle.net/xKuJH/5/

于 2012-08-22T02:51:01.787 に答える