Home/ Questions/Q 8482767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T19:54:00+00:00

Here is the markup. I want to add a vertical line between the two

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>

    ​

    • 0