4

这是标记。我想在两个表之间添加一条垂直线。我不想在这里使用图像。我需要一个纯 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 回答