Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: borders between table columns only

Tags:

css

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

like image 888
dmr Avatar asked Jul 22 '10 21:07

dmr


People also ask

How do I put a border around a table in CSS?

To specify table borders in CSS, use the border property.

How do I add a border to one row in a table?

If you want to add a border only to the bottom of the table row, you can apply the CSS border-bottom property to <td> elements that are placed within a <tr> tag.


2 Answers

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.

like image 128
Erasmus Avatar answered Oct 13 '22 18:10

Erasmus


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; } 
like image 33
rossipedia Avatar answered Oct 13 '22 18:10

rossipedia