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; }