title: Can I color table columns using CSS without coloring individual cells?
body: <p>Is there a way to color spans of columns all the way down.  See, starting example below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="1"&gt;
    &lt;tr&gt;
      &lt;th&gt;Motor&lt;/th&gt;
      &lt;th colspan="3"&gt;Engine&lt;/th&gt;
      &lt;th&gt;Car&lt;/th&gt;
      &lt;th colspan="2"&gt;Body&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;3&lt;/td&gt;
      &lt;td&gt;4&lt;/td&gt;
      &lt;td&gt;5&lt;/td&gt;
      &lt;td&gt;6&lt;/td&gt;
      &lt;td&gt;7&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;7&lt;/td&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;3&lt;/td&gt;
      &lt;td&gt;4&lt;/td&gt;
      &lt;td&gt;5&lt;/td&gt;
      &lt;td&gt;6&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I am looking for a better way (less code, non-individual coloring) to color, for example, "Engine" and "Body" spans, including all the cells underneath them in <code>#DDD</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style&gt;
    .color {
      background-color: #DDD
    }
  &lt;/style&gt;
  &lt;table border="1"&gt;
    &lt;tr&gt;
      &lt;th&gt;Motor&lt;/th&gt;
      &lt;th colspan="3" class="color"&gt;Engine&lt;/th&gt;
      &lt;th&gt;Car&lt;/th&gt;
      &lt;th colspan="2" class="color"&gt;Body&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td class="color"&gt;2&lt;/td&gt;
      &lt;td class="color"&gt;3&lt;/td&gt;
      &lt;td class="color"&gt;4&lt;/td&gt;
      &lt;td&gt;5&lt;/td&gt;
      &lt;td class="color"&gt;6&lt;/td&gt;
      &lt;td class="color"&gt;7&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;7&lt;/td&gt;
      &lt;td class="color"&gt;1&lt;/td&gt;
      &lt;td class="color"&gt;2&lt;/td&gt;
      &lt;td class="color"&gt;3&lt;/td&gt;
      &lt;td&gt;4&lt;/td&gt;
      &lt;td class="color"&gt;5&lt;/td&gt;
      &lt;td class="color"&gt;6&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>