AnthonyVO AnthonyVO - 1 month ago 8
CSS Question

Place content in a TD without affecting a dynamic table's layout. CSS only if possible

I have table that I want to remain dynamic meaning that I don't want to assign column widths in either pixels or percentages.

For the most part the table does a good job of assigning reasonable column widths. The problem is that occasionally I need to load up one or more TDs with data that is unusually wide. The result is that the entire table layout is shifted to deal with the extra wide TD content.

I want to somehow markup that one TD or its content to have it just fit in the existing layout without affecting with column widths. I DO want the TD height to be affected.

Basically I want to FORCE the content to wrap in the existing TD without the TD trying to accommodate the content by adjusting the column widths.

<table>
<tr><td>Field Label #1</td><td><input name='@1'></td></tr>
<tr><td>Field Label #2</td><td><input name='@2'></td></tr>
<tr><td>Field Label #3</td><td><input name='@3'></td></tr>
<tr><td>Field Label #4</td><td><input name='@4'></td></tr>
<tr><td>&nbsp;</td><td class='ignoreContentWidth'><div>Super long message or notice to user that I want to wrap naturally but I don't want it to have any effect on the table layout..</div></td></tr>
<tr><td>Field Label #5</td><td><input name='@5'></td></tr>
</table>‚Äč


I have tried the following CSS which gets me part of the way but now the TD also ignores the content height.

.ignoreContentWidth
{
/* display: none; */
position:relative;
}

.ignoreContentWidth div
{
position:absolute;
top:0;
}


A fiddle that shows the problem.
Fiddle with CSS

Remove the CSS in the fiddle to see what I don't want.

Answer

Using

.ignoreContentWidth
{
    width:1px;
}

seems to do the trick.

It's a bit hacky, but making the width of that cell as small as possible brings it down to the width it would have been had it been empty. The text wraps and forces the cell height to change as required.

Comments