4

これがマークアップです。2つのテーブルの間に縦線を追加したいと思います。ここでは画像を使いたくありません。これには純粋なhtmlソリューションが必要です。

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

この画像のようなものここに画像の説明を入力してください

これがフィドルですhttp://jsfiddle.net/a2cR8/

4

2 に答える 2

3

いずれかのテーブルの左枠を1pxに設定してみませんか？

更新：あなたの画像に基づいて、これを試してください...（これはこれを行うための最良の方法ではないかもしれませんが、私にとってはうまくいきます...）

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>
于 2012-09-04T10:54:43.607 に答える
2

ここでこのフィドルを確認してください。それが役に立てば幸い。

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>

</ p>

于 2012-09-04T12:15:35.907 に答える