title: Cols, colgroups and css ":hover" pseudoclass
body: <p>I'm trying to create a table to display an individual's BMI.</p>
  
  <p>As a part of this, I'd like, on <code>:hover</code>, for the <code>&lt;tr&gt;</code> <strong>and</strong> <code>&lt;col&gt;</code> (or <code>&lt;colgroup&gt;</code>) to be highlighted also, in order for the intersection to be more apparent.</p>
  
  <p>As the table will feature both metric and imperial measurements, the :hover doesn't have to stop at the cell (from any direction) and would, in fact, be a bonus if it extended from one axis to the other. I'm also using the XHTML 1.1 Strict doctype, if this makes a difference?</p>
  
  <p>So... an example (the real table's... larger), but this should be representative:</p>
  
  <pre><code>&lt;script&gt;
  
  tr:hover {background-color: #ffa; }
  
  colgroup:hover,
  col:hover {background-color: #ffa; }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>...</p>
  
  <pre><code>&lt;table&gt;
      &lt;col class="weight"&gt;&lt;/col&gt;&lt;colgroup span="3"&gt;&lt;col class="bmi"&gt;&lt;/col&gt;&lt;/colgroup&gt;
  
      &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;50kg&lt;/th&gt;
          &lt;th&gt;55kg&lt;/th&gt;
          &lt;th&gt;60kg&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;160cm&lt;/td&gt;
          &lt;td&gt;20&lt;/td&gt;
          &lt;td&gt;21&lt;/td&gt;
          &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;165cm&lt;/td&gt;
          &lt;td&gt;18&lt;/td&gt;
          &lt;td&gt;20&lt;/td&gt;
          &lt;td&gt;22&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;170cm&lt;/td&gt;
          &lt;td&gt;17&lt;/td&gt;
          &lt;td&gt;19&lt;/td&gt;
          &lt;td&gt;21&lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>Am I asking the impossible, do I need to go JQuery-wards?</p>