How to add vertical line between two tables?

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

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

show us a demo of what are you trying to achieve – Alex Sep 04 '12 at 10:51 — Alex, Sep 04 '12 at 10:51

Jason · Answer 1 · 2012-09-04T12:09:48.297

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>

Well that doesn't actually places the line at the center of the two tables — user1083596, Sep 04 '12 at 11:12

score 2 · Accepted Answer · answered Sep 04 '12 at 12:15

Check this fiddle here. 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 to add vertical line between two tables?

2 Answers2

Linked