1

20 行 10 列のテーブルを作成しました。2 つの列ごとにグリッド線を作成したいと思います。

したがって、2 列目と 3 列目の間には、それらを区切る線があります。また、4 列目と 5 列目、6 列目と 7 列目、8 列目と 9 列目を区切る線も必要です。

しかし、1 列目と 2 列目、3 列目と 4 列目などを線で区切りたくありません。

CSSでこれを行う方法はありますか？列の個々のセルに左罫線を作成しようとしましたが、列の下に実線が表示されません。

どんな助けでも大歓迎です。

4

3 に答える 3

1

あなたが使用することができます

td:nth-child(2n){
  border-right: 1px solid #000
}

他のすべての td のみを選択し、それらを境界線に追加します

余分なマークアップを必要としないため、これが最もクリーンな方法です。しかし、すべてのブラウザがそれを処理するわけではありません:(

于 2010-05-22T16:45:42.280 に答える
0

あなたの実線の問題は、テーブルの「border-collapse」プロパティだと思います。「border-collapse:collapse」を設定しないと、表のセル間に空白ができます。

2 列目と 3 列目、4 列目と 5 列目などの間に境界線があるテーブルの例を次に示します。

<html>
<head>
<style type="text/css">
    table {
        border-collapse:collapse;
        border:1px solid black;
    }

    td {
        padding:2px 8px;
    }

    .border {
        border-right:1px solid black;
    }
</style>
</head>
<body>
<table>
<tr>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
</tr>
<tr>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
</tr>
</body>
<html>
于 2010-05-20T13:51:10.087 に答える