如何在兩個表格之間添加垂直線？

Question

這是標記。我想在兩個表格之間添加一條垂直線。我不想在這裏使用圖像。我需要一個純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/

Answer 1

檢查這個小提琴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 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> 

Answer 2

如何設置一個表的左邊框爲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> 

Answer 3

也許你想看看這個類似的帖子，關於垂直線的位置：

How to make a vertical line in HTML