Mon, 2009-12-07 23:56
I have tabulated information in two columns on a web page. I would like the left-hand column to be just wide enough to hold the longest piece of text, so that any wrapping takes place in the right-hand column. So far as I can tell, the "white-space: no-wrap" property would have to be applied separately to individual cells. Is there a way of avoiding this? It seems that CSS does not generally recognise table columns.
I have a couple of workarounds, but neither is ideal:
(1) Set the width of the left-hand column in HTML or XHTML. But if it is just wide enough in my browser then it may be insufficiently wide in someone else's!
(2) In the longest cell in the left-hand column, make all the spaces non-breaking. But, as I generate the table from a database, I'd have to make all the spaces non-breaking, and I'd like to avoid that.
Any advice gratefully received!
Tue, 2009-12-08 01:45
#1
if you don't need to support
if you don't need to support IE6 you could apply the no-wrap to all the first cells of each row:
td:first-child {white-space: no-wrap;}
Tue, 2009-12-08 23:16
#2
Can I prevent one column in a table from wrapping?
Many thanks. With a small tweak ("nowrap" not "no-wrap") this worked beautifully!