Adding table column dividers without distorting column data?

Question

Is there an easy way to create vertical dividers between HTML table columns? I want to add thick bars, but the only good way I've seen to do this is to distort table data add TD's.

Is there a way to add vertical dividers between columns of a table using only jQuery+CSS?

My table structure is pretty simple.

<table>
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>

Answer 1

Generally done with border on the right (or left) of each cell.

This -> http://jsfiddle.net/XFtBR/ should give you a start point.

Answer 2

Using the cell border is one option you can use but there's another:

I'm not sure if you can change your table structure but if you can, use the colgroup and col tags for table. I did a quick test in latest of FF, Chrome and Opera and it worked in all:

  <style type="text/css">
     table {
        border:1px solid #ccc;
        border-collapse:collapse;
     }

     .col {
        border-right:10px solid blue;
     }

  </style>

  <div id="tDiv">

  <table border="1">
     <colgroup class="col">
        <col width="200" />
     </colgroup>
     <colgroup class="col">
        <col width="200" />
     </colgroup>
     <thead>
        <tr>
           <th>one</th>
           <th>two</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td>one one</td>
           <td>one two</td>
        </tr>
     </tbody>   
  </table>
</div>

I did not get a change to test in IE (any versions of it) though.

Answer 3

what you are searching for is a attribute for the tag and it is called rules: http://www.htmlcodetutorial.com/tables/_TABLE_RULES.html

<table rules="cols">
  <thead><tr><th>...</tr></thead>
  <tbody><tr>...</tr>...</tbody>
</table>

You can style it using the css border properties. But the advantage over using a border on every cell is the fact that it will not add a border at the right side of the table (or the last cell actually) so you don't have to add a special class to the last cell to overwrite the border.

EDIT: Add the attribute border="0" to the tag if you don't want a border around the whole table (or not left/right of the first/last column).

EXAMPLE: http://jsbin.com/ixire