title: Style HTML table with vertical line
body: <p>I want to draw this using HTML5 and CSS:</p>
  
  <p><a href="https://i.stack.imgur.com/pTsWy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pTsWy.png" alt="Image of table"></a> </p>
  
  <p>I created the vertical line by using  </p>
  
  <pre><code>.Column-VerticalLine {
      border-right: thin solid #A9A9A9;
  }
  </code></pre>
  
  <p>with this HTML:</p>
  
  <pre><code>            &lt;div class="col-sm-2 Column-VerticalLine"&gt;
                  &lt;div&gt;&lt;/div&gt;
                  &lt;div style="font-weight: bold;"&gt; Messeages &lt;/div&gt;
                  &lt;div style="font-weight: bold;"&gt; Messeage Body bytes &lt;/div&gt;
                  &lt;div style="font-weight: bold;"&gt; Process Memory &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-1"&gt;
                  &lt;div style="font-weight: bold;"&gt; Total &lt;/div&gt;
                  &lt;div&gt; 0 &lt;/div&gt;
                  &lt;div&gt; 0B&lt;/div&gt;
                  &lt;div&gt; 21KB&lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>But the appearance is not correct, as you can see:</p>
  
  <p><a href="https://i.stack.imgur.com/m1TLP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m1TLP.png" alt="Screenshot of output"></a></p>
  
  <p>How can I fix this and get the result I desire?</p>