Question: Here is the markup. I want to add a vertical line between the two tables. I don't want to use images here. I need a pure 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 ![enter image description here](https://i.stack.imgur.com/RHkrw.png)

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

Answer: 
Check this fiddle [here](http://jsfiddle.net/RmMUa/). Hope it 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>

```

​
How about setting 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>

```