Allineamento dei dati decimali nella colonna della tabella per punto decimale, HTML5, CSS3

Question

Sto costruendo un plugin wordpress che sta generando una tabella HTML e inviando un blocco html gravityforms tramite shortcode.

mio problema è che il contenuto delle celle possono contenere:

• 23,24
• 1,234.665
• 123,4

ecc ...

Avviso il numero diverso di cifre decimali.

Esiste un non-hack & best practice modo di allineare i dati di questa colonna in base al punto decimale? In questo caso, l'allineamento a destra non funzionerà.

L'inserimento di 0 non è accettabile perché indica un grado di precisione che non è presente.

Come si può vedere, ho tentato di utilizzare align="char" char="." all'interno degli elementi td senza fortuna.

Qualsiasi aiuto che qualcuno può aiutare con questo sarebbe molto apprezzato.

Molte grazie.

C'è un modo di utilizzare printf("%8.3f",d1) o simile senza stampare effettivamente sullo schermo? per esempio. strutturare la variabile d1 per un uso successivo ma non stamparla effettivamente?

Answer 1

Il fatto è che devi accertarti che abbiano tutti lo stesso numero di cifre dopo il decimale.

Una volta fatto, utilizzare text-align. Tutto ciò che occorre è: style='text-align: right'

Ancora meglio, è possibile utilizzare una classe CSS anziché gli stili in linea. Il tuo markup sarebbe simile a questa:

<tr><td>Item 1</td><td>15</td><td class='price'>&pound;123.25</td></tr> 

Poi nel foglio di stile:

td.price{ 
    text-align: right; 
} 

con PHP, è possibile formattare un numero come una stringa con number_format. Non è necessario farlo eco o stamparlo, basta avvolgere la variabile in quella funzione. Ad esempio:

$table .= "<td class='price'>&pound;" . $price . "</td></tr>"; 

diventa:

$table .= "<td class='price'>&pound;" . number_format($price,3) . "</td></tr>"; 

Answer 2

Sarebbe accettabile per mettere il valore in due colonne?

Utilizzare sprintf() per convertire il valore in una stringa e quindi inserire i bit fino al punto decimale nella colonna sinistra (ma allineato a destra) e le posizioni decimali nella seconda colonna.

Vedere http://jsfiddle.net/alnitak/p4BhB/, ma ignorare il bit JS ...

Answer 3

Non c'è un modo diretto per farlo. HTML 4.01 ha align=char, ma senza alcun supporto browser. I CSS 2.0 avevano una controparte, usando la proprietà text-align, con uguale mancanza di supporto, quindi è stata rilasciata dal CSS 2.1. Le bozze di CSS3 hanno un buon sistema per tale allineamento, ma sono indicate come in pericolo di essere tagliate dalla specifica se non ci sono implementazioni (corrette).

Per ovviare al problema, è possibile applicare a destra i valori con qualcosa di invisibile (vuoto) in modo che quando i valori sono allineati a destra, i marcatori decimali vengano allineati. Esistono diversi modi per provare a ottenere questo risultato:

1) Utilizzare la cifra 0 ma impostare uno stile su di esso, rendendolo invisibile, ad es.

123.4<span class=s>00</span> 

con

.s { visibility: hidden; } 

2) Uso FIGURA SPACE U + 2007 definito per avere la stessa larghezza cifre (ove cifre sono di uguale larghezza), ad esempio

123.4   

Per far funzionare tutto questo, è necessario impostare il carattere in modo che contenga U + 2007. Secondo lo http://www.fileformat.info/info/unicode/char/2007/fontsupport.htm anche Arial lo contiene, ma temo che questo potrebbe non essere applicabile alle vecchie versioni di Arial ancora in uso.

3) Utilizzare uno spazio senza interruzioni e impostare la larghezza sul numero desiderato di cifre, utilizzando l'unità ch (definire di avere la larghezza della cifra 0), sebbene questa unità sia relativamente nuova e non supportata dai vecchi browser . Esempio:

123.4<span class=d2>&nbsp;</span> 

con

.d2 { width: 2ch; display: inline-block; } 

Io probabilmente utilizzare il primo metodo. In linea di principio, ha lo svantaggio che quando il CSS è disattivato, i dati contengono zeri, che implicano informazioni errate sull'accuratezza, mentre in altri metodi, il passaggio da "solo" a CSS fa incasinare il layout.

(È probabilmente ovvio che le cifre devono avere una larghezza di avanzamento uguale, in modo da poter allineare i dati numerici. Ciò significa semplicemente che il carattere utilizzato per i valori deve avere tale proprietà. ma per esempio Georgia, Constantia e Corbel no.)

Answer 4

Ho scritto un plugin jQuery che risolve questo problema. Si trova qui: https://github.com/ndp/align-column

Utilizzando il tabella HTML grezzo, si allineerà una colonna da punti decimali:

$('table').alignColumn(3);

Lo fa con l'aggiunta di un'altra colonna, ma fa del suo meglio per non corrompere l'altra spaziatura. C'è anche un riferimento a una soluzione diversa nella pagina Github.

Answer 5

Potrebbe essere eccessivo, ma avevo bisogno della stessa cosa e ho appena risolto con una lunghezza dell'output e aggiungendo spazi in base a quella lunghezza.

I.e.:

if (strlen($meal_retail) == 5) { 
echo "    "; 
} 
else (strlen($meal_retail) == 6) { 
    echo "  "; 
} 

Questo allineato i miei decimali correttamente con un po 'di più fare, e sono sicuro una matrice potrebbe pulire il codice di cui sopra fino ancora più bello.

Inoltre, sono stato conforme miei numeri di regolazione con:

echo money_format('%i',$meal_retail) (makes it a two decimal money number) 

Volevo solo per fornire la mia soluzione come stavo guardando questa pagina prima di venire con la mia risoluzione.

Answer 6

questa è la mia soluzione, spero sia d'aiuto !!

<style type="text/css"> 
td{ 
    font-family: arial; 
} 
.f{ 
    width: 10px; 
    color: white; 
    -moz-user-select: none; 
} 
</style> 

<table> 
<tr><td><span class="f">00</span>1.1<span class="f">00</span></td></tr> 
<tr><td><span class="f">0</span>12.34<span class="f">0</span></td></tr> 
<tr><td>123.456</td></tr> 
</table> 

con questo, non è possibile visualizzare gli zeri e non è possibile selezionarli!

Answer 7

Ho usato javascript per questo, spero che questo aiuterà .......

</tr> 
</table> 

</body> 
for(var i=0; i<numarray.length; i++){ 
    var n = numarray[i].toString(); 
    var res= n.split("."); 
    n = res[0]; 

    if(highetlen < n.length){ 
    highetlen = n.length; 
    } 

} 

for(var j=0; j<numarray.length; j++){ 
    var s = numarray[j].toString(); 
    var res= s.split("."); 
    s = res[0]; 

    if(highetlen > s.length){ 
    var finallevel = highetlen - s.length; 

    var finalhigh = ""; 
    for(k=0;k<finallevel;k++){ 
    finalhigh = finalhigh+ '&#160; '; 
    } 
    numarray[j] = finalhigh + numarray[j]; 
    } 
    var nadiss = document.getElementById("nadis"); 
    nadiss.innerHTML += "<tr><td>" + numarray[j] + "</td></tr>"; 
}