Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Table elements: max-width

Posted by: Brian Chandler Nov 21 2021, 02:42 PM

On my 'about cookies' page: https://imaginatorium.com/cookies.html ... I want to set a maximum width for the "value" column. This contains a basket, which might be long (to see this you need to go to a random page and click lots of 'Add to basket' links), and if this is really long the table ends up the full width of the browser, whereas I would prefer to wrap the cookie values.

I tried setting th style='max-width: 20em' but this had no effect. (I found stackoverflow answers suggesting this.)

So I have set 'width: 20em', but this fixes the width. I seem to remember getting stuck on this a month or so ago, and believed that the point was that for tables "width" really means "min-width', because tables stretch to contain their content. But actually, setting width "works", and the text just flows within it.

In the end I found the w3 thing: https://www.w3.org/Style/css2-updates/css2/visudet.html#min-max-widths

This appears to claim that setting max-width sets the maximum width. Well I wish I could see how to do that...

Posted by: Christian J Nov 22 2021, 12:56 PM

That seems to happen in my Firefox. When the TH width is disabled, the cookie values try to expand the table, but not wider than the parent DIV.main. It does seem Firefox obeys max-width on the TABLE element itself.

In my Vivaldi, the column width changes despite the fixed TH width, and the cookie values still wrap into new lines.

Posted by: Brian Chandler Nov 26 2021, 03:15 AM

Thanks for looking at this Christian. So it doesn't work. Well.

I can just use a fixed width, or I suppose since I want it to expand to the width of about 3 items in the "basket" cookie, I can just replace the first two spaces with nbsp...

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)