title: How can I get continuous top and bottom borders in an html table
body: <p>I'm writing a program which will produce an html file for displaying some data.  I need all columns to be aligned, so I'm trying to use a single html table, but I want to have solid horizontal lines in between some of the rows to separate the data.  Using <code>border-top</code> and <code>border-bottom</code> I've been able to get most of the way towards what I want, however the horizontal lines that this produces aren't solid (see image).</p>
  
  <p><img src="https://i.stack.imgur.com/s4GzF.jpg" alt="image from chrome broswer"></p>
  
  <p>My questions are:<ol><li>How can I get solid horiztonal lines between some of rows in my table</li><li>Also, a minor query, is there a better way of getting a bit of space between the row labels in the left hand column and the data.  Currently I'm specifying a blank column.</li></ol>The html behind that image is as follows:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta HTTP-EQUIV="Content-Type" Content="text/html; charset=Windows-1252"&gt;
      &lt;style type="text/css"&gt;
          tr.border_top td {
              border-top:1pt solid black;
          }
          tr.border_bottom td {
              border-bottom:1pt solid black;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body bgcolor=white&gt;&lt;b&gt;DATA&lt;/b&gt;&lt;/p&gt;
  &lt;table&gt;
      &lt;col align="left"&gt;&lt;/col&gt;
      &lt;col width=20&gt;&lt;/col&gt;
      &lt;col align="right"&gt;&lt;/col&gt;
      &lt;col align="right"&gt;&lt;/col&gt;
      &lt;col align="right"&gt;&lt;/col&gt;
      &lt;col align="right"&gt;&lt;/col&gt;
      &lt;tr class="border_top"&gt;
          &lt;td&gt;&lt;b&gt;XYZ1&lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;2.120&lt;/td&gt;
          &lt;td&gt;&lt;span style="color:blue"&gt;2.280&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span style="color:blue"&gt;2.810&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;3.000&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="border_bottom"&gt;
          &lt;td&gt;&lt;b&gt;ABC1&lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;1.370&lt;/td&gt;
          &lt;td&gt;&lt;span style="color:blue"&gt;1.550&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;1.690&lt;/td&gt;
          &lt;td&gt;&lt;span style="color:blue"&gt;1.780&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;b&gt;XYZ2&lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span style="color:blue"&gt;1.900&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;1.940&lt;/td&gt;
          &lt;td&gt;2.050&lt;/td&gt;
          &lt;td&gt;&lt;span style="color:blue"&gt;2.100&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="border_bottom"&gt;
          &lt;td&gt;&lt;b&gt;ABC2&lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span style="color:blue"&gt;1.910&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;1.950&lt;/td&gt;
          &lt;td&gt;2.060&lt;/td&gt;
          &lt;td&gt;&lt;span style="color:blue"&gt;2.100&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>