Comment ajouter de la ligne verticale entre les deux tables?

Voici le balisage. Je veux ajouter une ligne verticale entre les deux tables. Je ne veux pas utiliser des images ici. J'ai besoin d'un pur html solution pour cela.

<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>

Quelque chose comme cette image Comment ajouter de la ligne verticale entre les deux tables?

Ici est le violon http://jsfiddle.net/a2cR8/

nous montrer une démo de ce que vous essayez d'atteindre
ajouté le violon lien

OriginalL'auteur user1083596 | 2012-09-04

html html-table

Vérifier ce violon ici. Espérons que cela aide.

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>

Exactement ce que je cherchais 🙂

OriginalL'auteur tsergium

Comment sur la définition de la bordure gauche de l'une des tables de 1px?

Mise à jour:
Basé sur votre image, essayez ceci... (Cela peut ne pas être la meilleure façon de le faire, mais cela fonctionne pour moi...)

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>

+1. Me battre pour elle 🙂
Bien que ne fait pas les endroits de la ligne au centre des deux tables

OriginalL'auteur Jason

0

Vous voudrez peut-être jeter un oeil à ce poste similaire, sur des lignes verticales ici:

Comment faire une ligne verticale dans le HTML

essayé, mais cette solution n'a pas aidé moi

OriginalL'auteur Ignacio Mulas

Vous devez vous connecter pour publier un commentaire.