Allineare i dati decimali nella colonna della tabella per punto decimale, HTML5, CSS3

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

Il mio problema è che il contenuto della cella può contenere:

  • 23.24
  • 1,234.665
  • 123.4

eccetera…

Si noti il ​​numero diverso di posizioni decimali.

Esiste un metodo non corretto e pratico per allineare i dati di questa colonna in base al punto decimale? In questo caso, l'allineamento a destra non functionrà.

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

Come puoi vedere, ho provato a usare align="char" char="." dentro gli elementi del td senza fortuna.

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

Grazie molto.

C'è un modo di usare printf("%8.3f",d1) o simili senza effettivamente printingre sullo schermo? ad es. strutturare la variabile d1 per un uso successivo ma non effettivamente printingrla?

Non esiste un modo diretto per farlo. HTML 4.01 ha align=char , ma senza alcun supporto per browser. I CSS 2.0 avevano una controparte, che utilizzava la properties; 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, è ansible 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. Ci sono diversi modi per cercare di get questo:

1) Usa la cifra 0 ma imposta uno stile su di essa, rendendola invisibile, ad es

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

con

 .s { visibility: hidden; } 

2) Usa FIGURE SPACE U + 2007, definito per avere la stessa width delle cifre (quando le cifre sono di uguale width), ad es.

 123.4&#x2007;&#x2007; 

Perché funzioni, è necessario impostare il carattere in modo che contenga U + 2007. Secondo 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) Usa uno spazio senza interruzioni e imposta la sua width sul numero desiderato di cifre, usando l'unità ch (definisci la width della cifra 0), sebbene questa unità sia relativamente nuova e non supportta dai vecchi browser. Esempio:

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

con

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

Probabilmente userò il primo metodo. In linea di principio, ha lo svantaggio che quando il CSS è distriggersto, i dati contengono zeri, che implicano informazioni errate sull'accuratezza, mentre in altri methods, il passaggio da "solo" a CSS fa incasinare il layout.

(È probabilmente ovvio che le cifre devono avere una width di avanzamento uguale, in modo da poter allineare i dati numbersci. Questo significa semplicemente che il carattere utilizzato per i valori deve avere quella properties;. La maggior parte dei caratteri farà a tale riguardo, ma ad es. Constantia e Corbel non lo faranno.)

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

Usando la tua tabella HTML non elaborata, allinea una colonna per punti decimali:

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

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

Sarebbe accettabile mettere il valore in due colonne?

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

Vedi http://jsfiddle.net/alnitak/p4BhB/ , ma ignora il bit JS …

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

Dopo averlo fatto, usa l' text-align . Tutto ciò che serve è un: style='text-align: right'

Ancora meglio, potresti usare una class css invece di stili in linea. Il tuo markup sarà simile a questo:

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

Quindi nel tuo foglio di stile:

 td.price{ text-align: right; } 

Con php, puoi formattare un numero come una string con number_format . Non è necessario farlo eco o printingrlo, basta avvolgere la variabile in quella function. Per esempio:

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

diventa:

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

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

Vale a dire:

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

Questo ha allineato correttamente i miei decimali con un po 'di extra, e sono sicuro che un arrays potrebbe pulire il codice sopra ancora più bello.

Inoltre, ho uniformato i miei numbers adattandomi a:

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

Volevo solo fornire la mia soluzione mentre stavo guardando questa pagina prima di arrivare alla mia risoluzione.

questa è la mia soluzione, spero che aiuti !!

 <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 puoi vedere gli zeri e non puoi selezionarli!

Ho usato javascript per questo, spero che questo possa aiutare …….

 </tr> </table> </body> for(var i=0; i<numarrays.length; i++){ var n = numarrays[i].toString(); var res= n.split("."); n = res[0]; if(highetlen < n.length){ highetlen = n.length; } } for(var j=0; j<numarrays.length; j++){ var s = numarrays[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; '; } numarrays[j] = finalhigh + numarrays[j]; } var nadiss = document.getElementById("nadis"); nadiss.innerHTML += "<tr><td>" + numarrays[j] + "</td></tr>"; }