David Reis David Reis - 2 months ago 6
HTML Question

Long Line in HTML Table tainting the layout of other lines

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

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