How to add a vertical line between two tables?

Question

Here is the markup. I want to add a vertical line between two tables. I do not want to use images here. I need a clean HTML solution for this.

<div> <table width="50%" style="float:left"> <tr> <td><p class="dotted">row 1, cell 1</p></td> <td><p class="dotted">row 1, cell 2</p></td> </tr> <tr> <td><p class="dotted">row 2, cell 1</p></td> <td><p class="dotted">row 2, cell 2</p></td> </tr> </table> <table width="50%" style="float:left"> <tr> <td><p class="dotted">row 1, cell 1</p></td> <td><p class="dotted">row 1, cell 2</p></td> </tr> <tr> <td><p class="dotted">row 2, cell 1</p></td> <td><p class="dotted">row 2, cell 2</p></td> </tr> </table> </div> 

Something like this image

Here is the fiddle http://jsfiddle.net/a2cR8/

Answer 1

Check out this script here . Hope this helps.

CSS

 .parentTable{ width: 100%; border: 1px solid #b4b4b4; } .parentTable tr td{ padding: 5px 30px; } .parentTable tr td.header{ background: #265ca5; } .parentTable tr td.spec{ width: 1px; padding: 0; border: none; background: #b4b4b4; } .childTable{ width: 100%; } .childTable tr td{ border-bottom: 1px dashed; } .childTable tr:last-child td{ border: none; } 

HTML

 <table class="parentTable"> <tr> <td class="header" colspan="3">&nbsp;</td> </tr> <tr> <td> <table class="childTable"> <tr> <td> <p class=" entityHeader">Study Title</p> </td> <td> <p>row 1, cell 2</p> </td> </tr> <tr> <td><p class=" entityHeader">Start Date</p></td> <td><p >row 2, cell 2</p></td> </tr> </table> </td> <td class="spec"> &nbsp; </td> <td> <table class="childTable"> <tr> <td ><p class=" entityHeader">Project Type</p></td> <td><p >row 1, cell 2</p></td> </tr> <tr> <td><p class=" entityHeader">Project Subtype</p></td> <td><p >row 2, cell 2</p></td> </tr> </table> </td> </tr> 

Answer 2

How to set the left border of one of the tables to 1px?

Updated: Based on your image, try this ... (This may not be the best way to do this, but it works for me ...)

http://jsfiddle.net/jreljac/SvHqR/3/

 <table width="45%" style="float:left" class="tdDotted"> <tr> <td ><p class=" entityHeader">Study Title</p></td> <td><p >row 1, cell 2</p></td> </tr> <tr> <td><p class=" entityHeader">Start Date</p></td> <td><p >row 2, cell 2</p></td> </tr> </table> <div style="width: 3%; float: left;">&nbsp;</div> <div style="width: 3%; border-right: 1px solid red; float: left; height: 100%; margin-top: 5px;">&nbsp;</div> <div style="width: 3%; float: left;">&nbsp;</div> <table width="45%" style="float:left;" class="tdDotted"> <tr> <td ><p class=" entityHeader">Project Type</p></td> <td><p >row 1, cell 2</p></td> </tr> <tr> <td><p class=" entityHeader">Project Subtype</p></td> <td><p >row 2, cell 2</p></td> </tr> </table> 

Answer 3

Maybe you want to look at this similar post about vertical lines here:

How to make a vertical line in HTML