CSS Gridlines For Alternating Columns_问答_开发者

开发者 https://www.devze.com 2022-12-31 23:11 出处：网络

I have created a table with 20 rows and 10 columns. I would like to create a gridline separating every two columns.

So, between column 2 and 3 there would be a line separating them. There should also be lines separating columns 4 and 5, columns 6 and 7, and columns 8 and 9.

But I do not want to have a line separating col开发者_开发问答umns 1 and 2, or columns 3 and 4, etc.

Is there any way to do this with CSS? I have tried creating a left border on each individual cell of the column, but it does not give me a solid line going down the column.

Any help would be greatly appreciated.

You could use

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

Which will only select every other td and add them the border

It's the cleanest way to do it since it doesn't need any extraneous markup. But not every browser will handle it :(

I think your solid line problem is the 'border-collapse' property on the table. If you don't set 'border-collapse:collapse', there will be some whitespace between your table cells.

Here is an example of the table, with the borders between columns 2 and 3, 4 and 5, etc:

<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>

With CSS you can get the same effect, check this http://www.w3.org/Style/Examples/007/evenodd