|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
May 23rd, 2003, 02:55 AM
|
|||
|
|||
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
May 23rd, 2003, 09:06 AM
|
|||
|
|||
|
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
June 10th, 2003, 12:37 PM
|
|||
|
|||
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > Excel-like formatting with CSS possible? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
