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

User · Answer

Inside  lt td gt   use style  border-left 1px solid  colour

User · Answer

Borders on tables are always a bit flaky  One possibility would be to add a border-right declaration to each table cell except for the ones in right-most column  If you re using any kind of table-spacing this won t work very well    Another option would be to use a 1px high background image with the borders inside it  but that ll only work if you can guarantee the width of each cell at all times    Another possibility is to experiment with colgroup   col  This had fairly horrible support cross-browser the last time i looked at it but could have improved since then  http   www webmasterworld com forum83 6826 htm

User · Answer

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

User · Answer

I may be simplifying the issue  but does td  border-right  1px solid red   work for your table setup

User · Answer

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

User · Answer

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

User · Answer

See table s rules attribute - https   www w3 org TR html401 struct tables html h-11 3 1

User · Answer

Take a table with class name column-bordered-table then add this below css This will work with bootstrap table too  column-bordered-table thead td       border-left  1px solid  c3c3c3      border-right  1px solid  c3c3c3      column-bordered-table td       border-left  1px solid  c3c3c3      border-right  1px solid  c3c3c3      column-bordered-table tfoot tr       border-top  1px solid  c3c3c3      border-bottom  1px solid  c3c3c3     see the output below N B You have to add table header backgorund color as per you requirement

User · Answer

You need to set a border-right on the td s then target the last tds in a row to set the border to none  Ways to target    Set a class on the last td of each row and use that If it is a set number of cells and only targeting newer browers then 3 cells wide can use td   td   td Or better  with new browsers  td last-child

User · Answer

I used this in a style sheet for three columns separated by vertical borders and it worked fine    column-left        border-left  1px solid  dddddd     column-center          no border needed      column-right        border-right  1px solid  dddddd      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

[css] CSS: borders between table columns only

Examples related to css