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