title: Fancy border in a HTML table
body: <p>So I am styling a table, and I'd like to make quite a fancy underline for the table headings.</p>
  
  <p>I've though hard and had a look on the internet but couldn't find anything.</p>
  
  <p>This is the table structure:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;Number&lt;/td&gt;
              &lt;td&gt;Name&lt;/td&gt;
              &lt;td&gt;Address&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And my current styling:</p>
  
  <pre><code>table {
      width: 100%;
  }
  
      table thead {
          font-weight: bold;
      }
  
          table thead td {
              margin-right: 5px;
              border-collapse: separate;
              border-spacing: 10px 5px;
              border-bottom: 2px solid #427AA8;
          }
  
      table tbody {
          font-size: 90%;
      }
  
          table tbody tr {
              line-height: 2em;
              border-bottom: 1px solid #CCC;
          }
  
          table tbody td {
              padding: 0 5px;
          }
  </code></pre>
  
  <p>Here is a jsfiddle of the code: <a href="http://jsfiddle.net/tYA4e/1/" rel="nofollow">http://jsfiddle.net/tYA4e/1/</a></p>
  
  <p>What I am looking for is a break in the border between the columns, but only in the thead.</p>
  
  <p>And an example of what I am trying to achieve: <a href="http://i.imgur.com/OHrhJ.jpg" rel="nofollow">http://i.imgur.com/OHrhJ.jpg</a></p>
  
  <p>Is there a way to achieve this with some simple <code>CSS</code>?</p>