Long Line in HTML Table tainting the layout of other lines

Question

I have a html table serving as layout for a page (bad practice I know). This table goes something like this:

Label1    Value1
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b    Value4c   Value4d

I just added a validation error message that can be quite big to line one, so now it is:

Label1    Value1    ErrorMessage
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b    Value4c   Value4d

To make the design work I've added a colspan to the cell that has the validation message, so that it spans the entire table. It works with error messages of length small enough to not overflow the table. Other than that I get:

Label1    Value1    Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b                 Value4c               Value4d

Line 4 is completely messed up. Is there a way to specify that the error message cell contents should overflow the table, instead of enlarging the space for other cells in the same columns? Maybe some magic CSS?

Answer 1

To make the text extend outside the table, the text element either has to be at a higher level (hierarchically) than the table, or it has to be positioned without relation to the table.

You can accomplish the later by doing something like:

Label1    Value1    <span class="outside">Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage</span>
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b                 Value4c               Value4d

And then giving the outside class:

.outside
{
    position:absolute;
}

You will have to do some further formatting to get it to show up in the correction location.

EDIT:

Just realized the formatting cleans up a bit if you use Jose's idea as well and span instead of div.

table 
{
   table-layout:fixed;
   width:100em;
}

Answer 2

Ok, here's the solution I've test and works in Firefox 3:

<style type="text/css">
#error {
    width: inherit;
    overflow: auto;
    padding: 0;
    margin: 0;
}
</style>

<table width="400">
  <tr>
    <td width="100">A</td>
    <td colspan="3" width="300">
      <div id="error">Really long line...</div>
    </td>
  </tr>
  <tr>
    <td>1A</td>
    <td>1B</td>
    <td>1C</td>
    <td>1D</td>
  </tr>
  <tr>
    <td>2A</td>
    <td>2B</td>
    <td>2C</td>
    <td>2D</td>
  </tr>
</table>

Answer 3

This is very hackish but may work for your situation. If possible supply static widths for each of you content cells. Then add an extra cell without a width. The last cell should then expand leaving the others at their set width.

Edit: Based on your comment You can also try giving the error message a higher z-index in css. You will also need to set the messages position to make this work.