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

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