See screenshot attached.

I want to set up a table so that error messages appear directly above specific table columns in the form of a div tag with a red background and the same width as the column.

To do this I've added a div tag inside the <th> element of the table, with the display property set to 'none'.

Code:
<th>
   <nobr>Header Content</nobr>
   <div id="error_message">Error Message</div>
</th>
When I want to display an error message above the table I use the following styles on the div tag

Code:
      background-color: #ffcccc;
      width: 100%;
      position: relative;
      left: 0px;
      top: -100px;
      z-index: 1;
      display: block;
It displays the div tag above the header like I want, but it still stretches the height of the <th> element as if it was still contained inside of it. How do I do this without stretching the cell height?