problem with relative positioning and table cell height

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'.

<th>
   <nobr>Header Content</nobr>
   <div id="error_message">Error Message</div>
</th>

Code (markup):

When I want to display an error message above the table I use the following styles on the div tag

      background-color: #ffcccc;
      width: 100%;
      position: relative;
      left: 0px;
      top: -100px;
      z-index: 1;
      display: block;

Code (markup):

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?

 

remove => display: block; <= This will take the full "block" out and since there is no specified height, you can add some padding for spacing.