title: Borders and spacing between specific table rows
body: <p>I am new to CSS and am working on an intraweb application which will render in modern standard browsers (IE support is <em>not</em> necessary).  I have spent much time looking for answers on this and other sites, only to find the answers "It's impossible because..." or "Do this hack instead...." but I just won't accept that.</p>
  
  <p><strong>Here's what I need:</strong></p>
  
  <ol>
  <li>A table with one header row and multiple body rows;</li>
  <li>A solid border under the header row;</li>
  <li>Vertical white space (padding? margin? spacing?) between the header row and first body row only;</li>
  <li>Body rows being highlighted on mouse hover.</li>
  </ol>
  
  <p>I couldn't get (2) to be visible until I styled the table <code>border-collapse: collapse;</code>.   Fine.  But (3) apparently only works with <code>border-spacing</code>, and only on <code>&lt;td&gt;</code> elements (not <code>&lt;tbody&gt;</code> or <code>&lt;tr&gt;</code>), which is anyway disabled by the <code>collapse</code>.  Meanwhile, for some unknowable reason, <code>margin</code>'s are not recognized for <code>&lt;thead&gt;</code>, <code>&lt;tr&gt;</code>, or <code>&lt;th&gt;</code> elements, but having <code>padding-top</code> on the first row of the body's <code>&lt;td&gt;</code>'s works, except it doesn't, because when I mouse over that first row, the whole margin-which-is-implemented-as-<code>padding</code> gets highlighted as well, which nauseates me.</p>
  
  <p>I know having a few pixels of margin between a table's header and body is like a really out-of-left-field, why-would-anyone-ever-want-that thing to want, but what should I tell you? I'm no cheap date.</p>
  
  <p>Please be as brutal and condescending as you can in pointing out my stupidity in understanding CSS, <em>provided you also</em> either 1) say how to do it without changing the markup (thereby preserving the separation of presentation from content CSS was evidently designed to encourage) or 2) agree with me that CSS is weird.</p>
  
  <pre><code>&lt;head&gt;&lt;style&gt;
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    thead {
      border-bottom: 4px solid #123456;
    }
    /*** something goes here ***/
    tbody tr:hover {
      background-color: #ABCDEF;
    }
  &lt;/style&gt;&lt;/head&gt;
  
  &lt;body&gt;
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;&lt;th&gt;Fruit&lt;/th&gt;&lt;th&gt;Color&lt;/th&gt;&lt;th&gt;Yummy?&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;&lt;td&gt;Apple&lt;/td&gt;&lt;td&gt;Green&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Banana&lt;/td&gt;&lt;td&gt;Yellow&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Pear&lt;/td&gt;&lt;td&gt;Brown&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>