random .NET and web development musings

If you make a table 100% width:

table {
    width: 100%
}

then you’ll find that the cells within it will arrange themselves so they have a width proportional their respective content lengths. However, sometimes you might want to have cell be as narrow as possible, and fit itself down to its contents, and let the others auto width themselves.

One options is to give the cell in question a fixed width, but this isnt a flexible solution if the width needs to vary.

Step up the following:

table {
    width 100%;
}
table td.narrow {
    width: 1px;
    white-space: nowrap;
}

the width on the cell will make it behave like the min-width property, it will be at least 1px wide, larger content will cause it to expand. Brilliant! Then add a cheeky nowrap to prevent it from wrapping at whitespace and you’re away!

Aceness

1 COMMENT
May 8, 2014
ad

[…] Min width table cell in 100% width table […]

Post a comment