[thelist] numeric alignment

Ken Snyder kendsnyder at gmail.com
Fri May 23 15:42:21 CDT 2008


John Allsopp wrote:
> Hi
>
> Is there a CSS way of saying if the content of my td is text, left align 
> it, if it's a number, right align it, or align it to the decimal point?
>
> I'm thinking not, so I guess I'm going to have to td class='number' all 
> of the number contents. The numbers are in columns, but there are a 
> couple of colspanned headers.
>
> It all seems very un-CSS-like to me. What's my best approach?
>
> J
>   
Yes, there is no way I've heard for CSS to detect data types.  It makes 
the most sense for the server-side code to decide the type, and, as you 
say, apply a CSS class.  You could also do it in JavaScript if you don't 
have control of the HTML output:

var tds = document.getElementsByTagName('td');
for (var i = 0, len = tds.length; i < len; i++) {
  if (tds[i].innerHTML == String(parseFloat(tds[i].innerHTML)) {
    tds[i].className += (tds[i].className == '' ? '' : ' ') + 'number';
  }
}

- Ken Snyder



More information about the thelist mailing list