表の小数点、HTML5、CSS3の小数点データの整列

Question

私はHTMLテーブルを生成しており、shortcode経由でgravityforms htmlブロックに送信しているwordpressプラグインを構築しています。

私の問題は、セルの内容を含めることができるということです。

など

• 23.24
• 1,234.665
• 123.4

...

お知らせ小数点以下の桁数の異なります。

非ハック&ベストプラクティスこの列のデータを小数点で整列する方法はありますか？この場合、右揃えは機能しません。

0を挿入することは、そこにない正確さを示すため、受け入れられません。

ご覧のとおり、私はalign="char" char="."を運がないtd要素の中に使用しようとしました。

誰もがこれを助けることができるどんな助けも大いに感謝します。

多くのありがとうございます。

実際に画面に印刷しないでprintf("%8.3f",d1)などを使用する方法はありますか？例えば後で使用するために変数d1を構成しますが、実際には印刷しませんか？

Answer 1

問題は、すべてが10進数の後に同じ桁数を持つことを保証することです。

これを実行したら、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>"; 

Answer 2

は列に値を入れるにしてもよいでしょうか？

sprintf()を使用して値を文字列に変換し、左側の列の小数点以下（右揃え）および2番目の列の小数点以下を配置します。

http://jsfiddle.net/alnitak/p4BhB/を参照してください。ただし、JSビットは無視してください...

Answer 3

これを行う直接的な方法はありません。 HTML 4.01はalign=charですが、ブラウザはサポートされていません。 CSS2.0にはtext-alignプロパティを使用して同等のサポートがないため、CSS 2.1から削除されました。 CSS3のドラフトは、そのような整列のための素晴らしいシステムを持っていますが、（正しい）実装がない場合、仕様から切り離される危険性があると示されています。

回避策として、値を右に揃えたときに小数点が揃うように、値を非表示（空白）にすることができます。これを達成するためにいくつかの方法があります：

1）数字0を使用しますが、スタイルを設定して、目に見えないようにします。

.s { visibility: hidden; } 

2と

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

）を使用し、図SPACE U + 2007の数字と同じ幅を有するように定義された（数字が等しい幅である場合）、例えば

123.4   

これを行うには、U + 2007が含まれるようにフォントを設定する必要があります。 http://www.fileformat.info/info/unicode/char/2007/fontsupport.htmによれば、Arialにもそれが含まれていますが、これはまだ使用中のArialの古いバージョンには当てはまらないかもしれません。

3）chユニット（0の幅を持つように定義します）を使用して、改行なしのスペースを使用して幅を希望の桁数に設定します。ただし、このユニットは比較的新しいものであり、古いブラウザではサポートされません。例：

私はおそらく最初のメソッドを使用します

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

と

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

。原則として、CSSがオフのときはデータにゼロが含まれているため、精度に関する情報が間違っていますが、他の方法ではCSSをオフにするだけではレイアウトが崩れるという欠点があります。

（数値データを一列に並べることができるように、数字の幅を同じにする必要があることは明らかです）これは値に使用するフォントにそのプロパティが必要であることを意味します。例えばGeorgia、Constantia、Corbelはそうではありません。）

Answer 4

これを解決するjQueryプラグインを作成しました。 https://github.com/ndp/align-column

をあなたの生のHTMLテーブルを使用して、それは小数点で列を整列させる：それはここにあります

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

それは別の列を追加することでこれを行いますが、他に破損していない最善を尽くします間隔。 Githubページには別のソリューションへの参照もあります。

Answer 5

私は同じことが必要でしたが、出力の長さとその長さに基づいて空白を追加するだけで解決しました。

I.e.：これは、余分のビットをやって正しく私の小数点以下をラインアップし、私は、アレイは、最大でもよりよい上記のコードをきれいにできたと確信している

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

。

また、私はとの調整私の番号を準拠してきた：私は私自身の解像度を考え出す前に、このページを見ていたよう

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

はちょうど私のソリューションを提供したかったです。

Answer 6

これは私のソリューションです。

<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を使用している

Answer 7

、私はあなたがHTMLを生成するために使用しているどのような言語

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