title: Background Image on <tr>
body: <p>I have a table that has 13 columns and an unknown number of rows, could be 1, could be 50+. The table is also wrapped in a scroll wrapper so that only 4 rows are visible at a time. Some of the rows need to have a background image of text "EXPIRED" that spans the entire row.</p>
  
  <p>I have tried many different ways to try and solve this and have yet to find a solution that works.</p>
  
  <p>W3C says you cannot place a background image on a <code>&lt;TR&gt;</code> tag. That needs to change.</p>
  
  <p>One solution I tried was placing a <code>&lt;div&gt;</code> inside the first <code>&lt;td&gt;</code> and using CSS to absolutely position it:</p>
  
  <pre><code>&lt;table style="empty-cells:show" class="wiTable"&gt;
  &lt;tr&gt;&lt;td&gt;&lt;div class="expired"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;/table&gt;
  
  .expired {
      background:url("/images/Expired.png") no-repeat left top;
      position: absolute;
      left: 0;
      width: 900px;
      height: 26px;
      z-index: 0;
  }
  </code></pre>
  
  <p>This worked up to a point. The problem is it also placed the image on the rows that were hidden by the scroll wrapper and the images did not scroll with the table.</p>
  
  <p>I thought I could also break the image up into segments and place them in the individual cells, but that won't work because I need it on several tables and the cells are not a fixed width across the tables.</p>
  
  <p>Oh, This needs to work in IE8 as that is the environment I am working with.</p>
  
  <p>Here is an example of the absolute positioning result:
  <img src="https://i.stack.imgur.com/CXqcO.png" alt="Expired Example"></p>