CSS: borders between table columns only

Question

Is there a way, using CSS, to show borders in a table between columns only (not on the outer edges)?

Answer 1

Edit 2

Erasmus has a better one-liner below

---

Not without tricky css selectors and extra markup and the like.

Something like this might do (using CSS selectors):

table {
    border:none;
    border-collapse: collapse;
}

table td {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

table td:first-child {
    border-left: none;
}

table td:last-child {
    border-right: none;
}

Edit

To clarify @jeroen's comment blow, all you'd really need is:

table { border: none; border-collapse: collapse; }
table td { border-left: 1px solid #000; }
table td:first-child { border-left: none; }

Answer 2

I used this in a style sheet for three columns separated by vertical borders and it worked fine:

#column-left {
     border-left: 1px solid #ffffdffffd;
}
#column-center {
     /*no border needed/*
}
#column-right {
     border-right: 1px solid #ffffdffffd;
}

The column on the left gets a border on the right, the column on the right gets a border on the left and the the middle column is already taken care of by the left and right.

If your columns are inside a div/wrapper/table/etc... don't forget to add extra space to accomodate the width of the borders.

Answer 3

I may be simplifying the issue, but does td {border-right: 1px solid red;} work for your table setup?

Answer 4

There's no easy way of doing this, other than doing something like class="lastCell" on the last td in each tr, and then setting your css up like this:

#table td {
    border-right: 5px solid red
}

.lastCell {
    border-right: none;
}

Answer 5

I know this is an old question, but there is a simple, one line solution which works consistently for Chrome, Firefox, etc., as well as IE8 and above (and, for the most part, works on IE7 too - see http://www.quirksmode.org/css/selectors/ for details):

table td + td { border-left:2px solid red; }

The output is something like this:

Col1 | Col2 | Col3

What is making this work is that you are defining a border only on table cells which are adjacent to another table cell. In other words, you're applying the CSS to all cells in a row except the first one.

By applying a left border to the second through the last child, it gives the appearance of the line being "between" the cells.

Answer 6

Inside <td>, use style="border-left:1px solid #colour;"