html – 如何在两个表之间添加垂直线?

html – 如何在两个表之间添加垂直线?,第1张

概述这是标记.我想在两个表之间添加一条垂直线.我不想在这里使用图像.我需要一个纯 HTML的解决方案. <div> <table width="50%" style="float:left"> <tr> <td><p class="dotted">row 1, cell 1</p></td> <td><p class="dotte 这是标记.我想在两个表之间添加一条垂直线.我不想在这里使用图像.我需要一个纯 HTML的解决方案.

<div>    <table wIDth="50%" >        <tr>            <td><p >row 1,cell 1</p></td>            <td><p >row 1,cell 2</p></td>        </tr>        <tr>            <td><p >row 2,cell 1</p></td>            <td><p >row 2,cell 2</p></td>        </tr>    </table>    <table wIDth="50%" >        <tr>            <td><p >row 1,cell 2</p></td>        </tr>    </table></div>

像这个图像的东西

这是小提琴http://jsfiddle.net/a2cR8/

解决方法 检查这个小提琴 here.希望它有所帮助.

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 ><tr>    <td  colspan="3">&nbsp;</td></tr><tr>    <td>        <table >            <tr>                <td>                    <p >Study Title</p>                </td>                <td>                    <p>row 1,cell 2</p>                </td>            </tr>            <tr>                <td><p >Start Date</p></td>                <td><p >row 2,cell 2</p></td>            </tr>        </table>    </td>    <td >        &nbsp;    </td>    <td>        <table >            <tr>                <td ><p >Project Type</p></td>                <td><p >row 1,cell 2</p></td>            </tr>            <tr>                <td><p >Project Subtype</p></td>                <td><p >row 2,cell 2</p></td>            </tr>        </table>    </td></tr>
总结

以上是内存溢出为你收集整理的html – 如何在两个表之间添加垂直线?全部内容,希望文章能够帮你解决html – 如何在两个表之间添加垂直线?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1064148.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存