ansaurus

Question

Answer 1

A:

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>

mhughes 2010-05-20 13:51:10

Answer 2

A:

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

Guillaume Esquevin 2010-05-22 16:45:42

ansaurus

tags:

views:

answers:

CSS Gridlines For Alternating Columns

related questions