title: Overlapping table element left and right border
body: <p>I want to set each element in the first row of my table to have a left border of a certain color and a right border of a certain color. Unfortunately, it looks like the borders of adjacent table cells are overlapping and I only get the left border color showing. The left border is supposed to be light gray and the right side dark gray.</p>
  
  <p><img src="https://i.stack.imgur.com/xWtoq.png" alt="enter image description here"></p>
  
  <p>Here is my HTML generating the table. (HTML is generated in cherrypy)</p>
  
  <pre><code>&lt;th id="tbl_head" colspan='4'&gt;%s&lt;/th&gt;
      &lt;tr&gt;
          &lt;td id="colhead"&gt;Track&lt;/td&gt;
          &lt;td id="colhead"&gt;Artist&lt;/td&gt;
          &lt;td id="colhead_time"&gt;Time&lt;/td&gt;
          &lt;td id="colhead"&gt;Album&lt;/td&gt;
      &lt;/tr&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>table {
      font-family: verdana,arial,sans-serif;
      font-size:11px;
      margin-left: auto;
      margin-right: auto;
      border-width: 1px;
      border-collapse: collapse;
  }
  
  td {
      padding: 3px;
  }
  
  #colhead {
      font-weight: bold;
      text-align: left;
      background-color: #989898;
      color: #000000;
  
      border-left-color:   #aeaeae;
      border-left-style: solid;
      border-left-width: 2px;
  
      border-right-color: #6c6c6c;    
      border-right-style: solid;
      border-right-width: 1px;
  
  }
  
  #colhead_time {
      font-weight: bold;
      text-align: right;
      background-color: #989898;
      color: #000000;
  
      border-left-color:   #aeaeae;
      border-left-style: solid;
      border-left-width: 2px;
  
      border-right-color: #6c6c6c;    
      border-right-style: solid;
      border-right-width: 1px;
  
  }
  </code></pre>