Intereting Posts

Выровнять десятичные данные в столбце таблицы на десятичную точку, HTML5, CSS3

Я создаю плагин wordpress, который генерирует таблицу HTML и отправляет в html-блок gravityforms через короткий код.

Моя проблема заключается в том, что содержимое ячеек может содержать:

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

и т.д…

Обратите внимание на различное количество знаков после запятой.

Существует ли способ, не связанный с удалением и наилучшей практикой , для выравнивания данных столбцов по десятичной точке? В этом случае право выравнивания не будет работать.

Вставка 0s неприемлема, поскольку это указывает на степень точности, которой нет.

Как вы можете видеть, я попытался использовать align="char" char="." внутри td элементов без везения.

Любая помощь, которая может помочь с этим, будет очень признательна.

Большое спасибо.

Есть ли способ использовать printf("%8.3f",d1) или аналогичный без фактической печати на экране? например, структурирование переменной d1 для последующего использования, но не на самом деле ее печать?

Нет прямого способа сделать это. HTML 4.01 имеет align=char , но без поддержки браузера. CSS 2.0 имел аналог, используя свойство text-align , с равным отсутствием поддержки, поэтому он был исключен из CSS 2.1. Шаблоны CSS3 имеют хорошую систему для такого выравнивания, но указывают на то, что они могут быть вырезаны из спецификации, если нет (правильных) реализаций.

В качестве обходного пути вы можете править значения с помощью чего-то невидимого (пустого), чтобы при выравнивании значений вправо десятичные маркеры выравнивались. Существует несколько способов добиться этого:

1) Используйте цифру 0, но установите стиль на ней, делая ее невидимой, например

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

с

 .s { visibility: hidden; } 

2) Используйте FIGURE SPACE U + 2007, которые имеют ту же ширину, что и цифры (когда цифры имеют одинаковую ширину), например

 123.4&#x2007;&#x2007; 

Для этого вам нужно установить шрифт так, чтобы он содержал U + 2007. Согласно http://www.fileformat.info/info/unicode/char/2007/fontsupport.htm, даже Arial содержит его, но я боюсь, что это может не относиться к старым версиям Arial, которые все еще используются.

3) Используйте свободное место и установите его ширину на нужное количество цифр, используя блок ch (укажите ширину цифры 0), хотя это устройство относительно новое и не поддерживается старыми браузерами. Пример:

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

с

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

Вероятно, я бы использовал первый метод. В принципе, недостаток заключается в том, что когда CSS отключен, данные содержат нули, что подразумевает неверную информацию о точности, тогда как в других методах переключение CSS только «помешает» макету.

(Вероятно, очевидно, что цифры должны иметь одинаковую ширину, чтобы вы могли выровнять числовые данные вообще. Это означает, что шрифт, используемый для значений, должен иметь это свойство. Большинство шрифтов будут делать в этом отношении, но, например, Констанция и Корбель не будут.)

Я написал плагин jQuery, который решает это. Он находится здесь: https://github.com/ndp/align-column

Используя вашу необработанную таблицу HTML, она выравнивает столбец по десятичной точке:

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

Он делает это, добавляя еще один столбец, но делает все возможное, чтобы не повредить другой интервал. Также есть ссылка на другое решение на странице Github.

Было бы приемлемо положить значение в две колонки?

Используйте sprintf() чтобы преобразовать значение в строку, а затем поместить биты в десятичную точку в левом столбце (но выравнивание по правому краю) и десятичные разряды во втором столбце.

См. http://jsfiddle.net/alnitak/p4BhB/ , но игнорируйте бит JS …

Дело в том, что вы должны убедиться, что все они имеют одинаковое количество цифр после десятичной дроби.

Как только вы это сделаете, используйте text-align . Все, что потребуется, это: style='text-align: right'

Еще лучше, вы можете использовать класс css вместо встроенных стилей. Ваша разметка будет выглядеть так:

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

Затем в вашей таблице стилей:

 td.price{ text-align: right; } 

С помощью php вы можете форматировать число в виде строки с помощью number_format . Вам не нужно эхо или распечатывать его, просто оберните свою переменную в эту функцию. Например:

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

будет выглядеть так:

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

Это может быть излишним, но мне нужно то же самое и просто решить с длиной вывода и добавлением пробелов на основе этой длины.

То есть:

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

Это правильно выравнивало мои десятичные знаки с небольшим количеством дополнительных действий, и я уверен, что массив мог бы очистить приведенный выше код еще лучше.

Кроме того, я отвечал на мои настройки:

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

Я просто хотел предоставить свое решение, когда смотрел эту страницу, прежде чем придумать свое решение.

это мое решение, надеюсь, что это поможет!

 <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> 

с этим вы не можете видеть нули и не можете их выбрать!

Я использовал javascript для этого, надеюсь, это поможет …….

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