title: Eliminating gap between vertical borders of table <td>s
body: <p>I have a resume that I'm trying to translate from MS Word into HTML and CSS for easier maintenance and sharing. I like the style of the resume, and would prefer to keep it. It has a left column, with titles like "Education", "Experience", etc. in bold, and right-aligned against a vertical separator.</p>
  
  <p>In Word this is achieved by a table, with the style of the central border set to solid, and the other borders set to blank. This allows the section titles to be vertically aligned with the associated content.</p>
  
  <p>I tried to simply duplicate this technique, but in Firefox and Chrome, if I set a column of tds' border-right attributes to solid, there are gaps at the vertical divisions of the table. This sort of ruins the effect.</p>
  
  <p>I thought of using two divs, one with the headings and one with the content, but other than hard-coding pixel heights (which has its own obvious sets of problems), I can't figure out how to keep them vertically in-sync.</p>
  
  <p>Is there a way to do this without losing the ability to keep the titles and their associated content  vertically aligned?</p>
  
  <p>The table code looks something like</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;&lt;td style="border-right:1px solid black;"&gt;Education&lt;/td&gt;&lt;td&gt; [Name of School, etc.]&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td style="border-right:1px solid black;"&gt;Experience&lt;/td&gt;&lt;td&gt;[Work experience]&lt;/td&gt;&lt;/tr&gt;
  .
  .
  .
  &lt;/table&gt;
  </code></pre>
  
  <p>`</p>