#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    2
    Rep Power
    0

    Question Excel-like formatting with CSS possible?


    hi there.

    first posting starts with a huge problem:
    out "beloved master" wants a text-alignment similar to the "Comma-alignment" (international formatting would be "." instead of ",") used in MS Excel.

    That means that the following examples should be aligned in that way that all dots are the "center" of the alignment. I know it sounds a "bit" weird, but the whole task is pretty weird, too .

    31.28
    0.6
    3
    768.32

    Additional information is that each number is embedded in a table cell. We here really don't know how to solve that prob except for formatting each and every part of e.g. "31.28" with separate styles or creating a three-columned table for each and every value. The prob here is that we have about 130 pages full ob these values and this would be a _slight_ waste of time though .
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    14
    If the table ONLY contains numbers.
    add this style
    Code:
    td {
    	font-family: courier,monospace;
    	text-align: right;
    }
    Add this JavaScript function:
    Code:
    function alignNumbers() {
    	var allNumberCells = document.getElementsByTagName('td')
    	for (var i = 0; i < allNumberCells.length; i++) {
    		// if cell has no decimal point add it
    		if (String(allNumberCells[i].innerHTML).indexOf('.') == -1) {
    			allNumberCells[i].innerHTML += '& nbsp;& nbsp;& nbsp;'
    //			allNumberCells[i].innerHTML += '.00'
    		}
    		// if cell has only one decimal, add a second
    		if (String(allNumberCells[i].innerHTML).match(/\.\d$/)) {
    			allNumberCells[i].innerHTML += '& nbsp;'
    //			allNumberCells[i].innerHTML += '0'
    		}
    	}
    }
    window.onload=alignNumbers
    (please ignore the spaces between ampersand and nbsp!]

    The function assumes there are two decimals maximum now. If not, the code should be extended.
    It simply adds non-breaking spaces to numbers that don't have two decimals yet.
    You could also add zeros instead of spaces (use the out-commented lines adding 0's instead of the lines adding the nbsp's).

    If other table cells exist that are NOT numbers, there's a few additional steps:
    -add a class to all table cells in your HTML that are numbers (e.g. class="number") [if all the cells containing numbers need to be treated as class='number', you could also add the class dynamically inside the for...loop in the JavaScript function above]
    -change the style definition to td.number
    -and add these lines to the JavaScript function as the first inside the for.. loop; it just says: if the class of the td is not 'number', ignore the following lines..:

    Code:
    		if (document.all && !window.opera) {
    			if (allNumberCells.item(i).attributes('class') != 'number') {
    				continue
    			}
    		}
    		else if (allNumberCells.item(i).getAttribute('class') != 'number') {
    			continue
    		}
    If your numbers can have more than two decimals, you could add an additional loop to check the maximum number of decimals on a page.

    Hope this helps,
    Jeroen
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    2
    Rep Power
    0
    hi jeroen,

    thanks a lot - this solution is definitely :up: and works more than fine.

    greetings,
    ronny.
  6. #4
  7. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    14
    http://www.w3.org/TR/REC-CSS2/text.h...def-text-align

    CSS should be able to do this all by itself.

IMN logo majestic logo threadwatch logo seochat tools logo