CSS Gridlines для чередующихся столбцов - PullRequest
Новая
       10

CSS Gridlines для чередующихся столбцов

1 голос
/ 20 мая 2010

Я создал таблицу с 20 строками и 10 столбцами. Я хотел бы создать линию сетки, разделяющую каждые два столбца.

Итак, между столбцами 2 и 3 будет разделительная линия. Также должны быть строки, разделяющие столбцы 4 и 5, столбцы 6 и 7 и столбцы 8 и 9.

Но я не хочу иметь строку, разделяющую столбцы 1 и 2 или столбцы 3 и 4 и т. Д.

Есть ли способ сделать это с помощью CSS? Я попытался создать левую границу для каждой отдельной ячейки столбца, но это не дает мне сплошную линию, идущую вниз по столбцу.

Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

1 голос
/ 22 мая 2010

Вы можете использовать 

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

Который будет выбирать только все остальные тд и добавлять им границу

Это самый чистый способ сделать это, так как он не требует никакой посторонней разметки. Но не каждый браузер с этим справится: (

0 голосов
/ 14 ноября 2013

С помощью CSS вы можете получить тот же эффект, отметьте это http://www.w3.org/Style/Examples/007/evenodd

0 голосов
/ 20 мая 2010

Я думаю, что ваша проблема со сплошной линией - это свойство '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>
...