Alinear datos decimales en la columna de la tabla por punto decimal, HTML5, CSS3

Question

Estoy construyendo un plugin de WordPress que está generando una tabla HTML y enviando a gravityforms html block a través de shortcode.

Mi problema es que el contenido de celdas pueden contener:

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

etc ...

Aviso la diferente número de cifras decimales.

¿Hay algún que no sea un hack & mejor práctica forma de alinear los datos de esta columna por punto decimal? En este caso, alinear a la derecha no funcionará.

No es aceptable insertar 0 porque esto indica un grado de precisión que no está allí.

Como puede ver, he intentado usar align="char" char="." dentro de los elementos td sin suerte.

Cualquier ayuda que alguien pueda ayudar con esto sería muy apreciada.

Muchas gracias.

¿Hay alguna forma de utilizar printf("%8.3f",d1) o similar sin imprimir realmente en la pantalla? p.ej. ¿estructurar la variable d1 para un uso posterior pero no imprimirla realmente?

Answer 1

Lo que pasa es que debe asegurarse de que todas tengan el mismo número de dígitos después del decimal.

Una vez que hagas eso, usa text-align. Todo lo que necesitará es un: style='text-align: right'

Mejor aún, podría usar una clase css en lugar de estilos en línea. Su margen de beneficio se vería así:

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

Luego, en su hoja de estilos:

td.price{ 
    text-align: right; 
} 

con PHP, puede dar formato a un número como una cadena con number_format. No tiene que repetirlo o imprimirlo, simplemente ajuste su variable en esa función. Por ejemplo:

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

se convierte en:

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

Answer 2

¿Sería aceptable para poner el valor en dos columnas?

Utilice sprintf() para convertir el valor en una cadena, y luego coloque los bits hasta el punto decimal en la columna izquierda (pero alineado a la derecha), y los lugares decimales en la segunda columna.

Consulte http://jsfiddle.net/alnitak/p4BhB/, pero ignore el bit JS ...

Answer 3

No hay una manera directa de hacer esto. HTML 4.01 tiene align=char, pero sin compatibilidad con el navegador. CSS 2.0 tenía una contraparte, usando la propiedad text-align, con igual falta de soporte, por lo que se eliminó de CSS 2.1. Los borradores CSS3 tienen un buen sistema para dicha alineación, pero se indica que corren el riesgo de ser eliminados de la especificación si no hay implementaciones (correctas).

Como solución temporal, puede aplicar un margen derecho a los valores con algo invisible (en blanco) de modo que cuando los valores se alinean a la derecha, los marcadores decimales se alineen. Hay varias formas de intentar lograr esto:

1) Use el dígito 0 pero establezca un estilo en él, haciéndolo invisible, p. Ej.

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

con

.s { visibility: hidden; } 

2) Uso FIGURA SPACE U + 2007, que se define para tener la misma anchura que los dígitos (cuando dígitos son de igual anchura), por ejemplo

123.4   

Para que esto funcione, debe configurar la fuente para que contenga U + 2007. De acuerdo con http://www.fileformat.info/info/unicode/char/2007/fontsupport.htm incluso Arial lo contiene, pero me temo que esto podría no aplicarse a las versiones anteriores de Arial todavía en uso.

3) Utilice un espacio sin interrupciones y configure su ancho al número deseado de dígitos, usando la unidad ch (defina que tiene el ancho del dígito 0), aunque esta unidad es relativamente nueva y no es compatible con navegadores antiguos . Ejemplo:

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

con

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

probablemente me gustaría utilizar el primer método. Como una cuestión de principio, tiene el inconveniente de que cuando CSS está desactivado, los datos contienen ceros, lo que implica información incorrecta sobre la precisión, mientras que en otros métodos, al cambiar CSS "solo" se daña el diseño.

(Probablemente sea obvio que los dígitos deben tener el mismo ancho de avance, para que pueda alinear los datos numéricos. Esto significa que la fuente utilizada para los valores debe tener esa propiedad. La mayoría de las fuentes lo harán a este respecto, pero, por ejemplo, Georgia, Constantia y Corbel no lo harán.)

Answer 4

Escribí un plugin de jQuery que resuelve esto. Se encuentra aquí: https://github.com/ndp/align-column

Uso de la tabla HTML en bruto, que se alineará una columna por puntos decimales:

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

Esto se logra mediante la adición de otra columna, pero hace lo posible para no dañar la otra espaciado. También hay una referencia a una solución diferente en la página de Github.

Answer 5

Podría ser exagerado, pero necesitaba lo mismo y solo resolví con una longitud de la salida y agregué espacios en blanco basados ​​en esa longitud.

I.e.:

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

Esta alineado correctamente mis decimales con un poco de extra haciendo, y estoy seguro de una matriz podría limpiar el código anterior hasta incluso más agradable.

Además, he ido conformando mis números de ajuste con:

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

Sólo quería dar mi solución ya que estaba buscando en esta página antes de subir con mi propia resolución.

Answer 6

esta es mi solución, espero que ayude !!

<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 esto, no puede ver los ceros y no puede seleccionarlos!

Answer 7

he utilizado javascript para esto, espero que esto ayudará .......

</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>"; 
}