Span elements breaks into next line in Table

[jjpeterjames]

How to avoid “Ages Price” td span elements breaks into next line?

This Ages Price td input will show near in “$” symbol. But it will goto next line?

See Ages Price column td in jsfiddle table.
My fiddle:
http://jsfiddle.net/GwWmV/5/

[shaneisme]

When faced with rendering a table, the browser will take liberties with it unless given very explicit direction. Even with explicit direction, if it can’t make what you want to fit and where you want to fit it work, it will just ignore it and go about its business.

That said, the simplest way to do it would give the header column a width that’s big enough to make the content fit. But like I said, the browser will totally ignore this if it won’t work in the space it’s rendering the table… so a width of 100% on the table just won’t work for your purposes, try giving it a fixed pixel value and stretch things out a bit. Messing with it a bit will give you what you want.

P.S. – you don’t need the <span>$</span> as it’s not doing anything, you can simply have the dollar sign next to the <input>.

[Author]

Posts