title: How to add vertical line between two tables?
body: <p>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. </p>
  
  <pre><code>&lt;div&gt;
      &lt;table width="50%" style="float:left"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;p class="dotted"&gt;row 1, cell 1&lt;/p&gt;&lt;/td&gt;
              &lt;td&gt;&lt;p class="dotted"&gt;row 1, cell 2&lt;/p&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;p class="dotted"&gt;row 2, cell 1&lt;/p&gt;&lt;/td&gt;
              &lt;td&gt;&lt;p class="dotted"&gt;row 2, cell 2&lt;/p&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;table width="50%" style="float:left"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;p class="dotted"&gt;row 1, cell 1&lt;/p&gt;&lt;/td&gt;
              &lt;td&gt;&lt;p class="dotted"&gt;row 1, cell 2&lt;/p&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;p class="dotted"&gt;row 2, cell 1&lt;/p&gt;&lt;/td&gt;
              &lt;td&gt;&lt;p class="dotted"&gt;row 2, cell 2&lt;/p&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Something like this image <img src="https://i.stack.imgur.com/RHkrw.png" alt="enter image description here"></p>
  
  <p>Here is the fiddle <a href="http://jsfiddle.net/a2cR8/" rel="nofollow noreferrer">http://jsfiddle.net/a2cR8/</a></p>