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

本文介绍了如何在两个表之间添加垂直线?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

这是标记.我想在两个表之间添加一条垂直线.我不想在这里使用图片.我需要一个纯HTML解决方案.

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>

类似于此图像的

这是小提琴 jsfiddle/a2cR8/

推荐答案

在此处选中此小提琴.希望对您有所帮助.

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>