title: Adding continuous border to only header and footer of table
body: <p>I would like a table where some cells have broken borders and others have continuous borders. For example, here is the html for a four column, 12 row table:</p>
  
  <pre><code>    &lt;table&gt;
      &lt;thead&gt;
          &lt;tr class="header"&gt;
              &lt;th id="blank_cell"&gt;&lt;/th&gt; &lt;!-- blank --&gt;
              &lt;th&gt;first_c&lt;/th&gt;
              &lt;th&gt;second_c&lt;/th&gt;
              &lt;th&gt;third_c&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;th&gt;row one&lt;/th&gt;
              &lt;td&gt;1,1&lt;/td&gt;
              &lt;td&gt;1,2&lt;/td&gt;
              &lt;td&gt;1,3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;row two&lt;/th&gt;
              &lt;td&gt;2,1&lt;/td&gt;
              &lt;td&gt;2,2&lt;/td&gt;
              &lt;td&gt;2,3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;row three&lt;/th&gt;
              &lt;td&gt;3,1,&lt;/td&gt;
              &lt;td&gt;3,2&lt;/td&gt;
              &lt;td&gt;3,3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;row four&lt;/th&gt;
              &lt;td&gt;4,1&lt;/td&gt;
              &lt;td&gt;4,2&lt;/td&gt;
              &lt;td&gt;4,3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;row five&lt;/th&gt;
              &lt;td&gt;5,1&lt;/td&gt;
              &lt;td&gt;5,2&lt;/td&gt;
              &lt;td&gt;5,3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;row six&lt;/th&gt;
              &lt;td&gt;6,1&lt;/td&gt;
              &lt;td&gt;6,2&lt;/td&gt;
              &lt;td&gt;6,3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;row seven&lt;/th&gt;
              &lt;td&gt;7,1&lt;/td&gt;
              &lt;td&gt;7,2&lt;/td&gt;
              &lt;td&gt;7,3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;row eight&lt;/th&gt;
              &lt;td&gt;8,1&lt;/td&gt;
              &lt;td&gt;8,2&lt;/td&gt;
              &lt;td&gt;8,3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;row nine&lt;/th&gt;
              &lt;td&gt;9,1&lt;/td&gt;
              &lt;td&gt;9,2&lt;/td&gt;
              &lt;td&gt;9,3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;row ten&lt;/th&gt;
              &lt;td&gt;10,1&lt;/td&gt;
              &lt;td&gt;10,2&lt;/td&gt;
              &lt;td&gt;10,3&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th&gt;End&lt;/th&gt;
              &lt;td&gt;e_one&lt;/td&gt;
              &lt;td&gt;e_two&lt;/td&gt;
              &lt;td&gt;e_three&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I would like the thead cells to have a continuous border along the bottom (except for the first, blank cell), whilst maintaining a broken border on the other rows.
  Here is some CSS, it creates broken borders along the bottom of the rows (except the leftmost cells of each row).</p>
  
  <pre><code>body {
      font-family:Arial,Verdana,sans-serif;
      color:#111111;
  }
  table {
      width:450px;
  }
  
  td,th {
      padding:7px 10px 10px 10px;
  }
  
  thead th {
      border-bottom:4px solid #111111;
  }
  
  tbody th {
      border-left:2px solid #111111;
      border-right:4px solid #111111;
  }
  
  tbody td {
      border-bottom:2px solid #111111;
  }
  
  th {
      text-transform:uppercase;
      letter-spacing:0.1em;
      word-spacing:0.3em;
      text-align:left;
  }
  
  #blank_cell {
      border:none;
  }
  
  tr:hover {
      background-color:#c3e6e5;
  }
  </code></pre>
  
  <p>I want the very first row - the header row - to have a continuous, unbroken line, whereas I want the others to remain as they are (i.e. broken). All I can find, so far, is styling that is applied to the whole table: for example, I can't seem to collapse borders or set zero spacing on just the cells in the thead part of the table. So if I make the borders continuous, it is applied to the entire table.</p>