9

HTMLテーブルを生成し、ショートコードを介してgravityformshtmlブロックに送信するワードプレスプラグインを構築しています。

私の問題は、セルの内容に次のものが含まれている可能性があることです。

  • 23.24
  • 1,234.665
  • 123.4

等...

小数点以下の桁数が異なることに注意してください。

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

0を挿入することは、そこにない精度の程度を示しているため、受け入れられません。

ご覧のとおり、私はalign="char" char="."td要素の内部で運が悪かったので使用しようとしました。

誰もがこれを手伝うことができるどんな助けでも大いにありがたいです。

どうもありがとう。

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

4

7 に答える 7

5

これを行う直接的な方法はありません。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 をオフにすると「のみ」レイアウトが台無しになります。

(数値データを整列できるように、数字の送り幅が同じでなければならないことはおそらく明らかです。これは、値に使用されるフォントがそのプロパティを持っている必要があることを意味します。ほとんどのフォントはこの点で機能しますが、たとえばジョージア、コンスタンシア、そしてコーベルはしません。)

于 2012-07-22T17:09:49.070 に答える
4

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

生の HTML テーブルを使用して、列を小数点で揃えます。

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

別の列を追加することでこれを行いますが、他のスペースを壊さないように最善を尽くします。Github ページには別のソリューションへの参照もあります。

于 2013-02-11T23:16:12.950 に答える
2

値を2 つの列に入れることは許容されますか?

を使用sprintf()して値を文字列に変換し、小数点までのビットを左の列 (右揃え) に配置し、小数点以下の桁数を 2 番目の列に配置します。

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

于 2012-07-22T14:31:16.247 に答える
0

問題は、小数点以下の桁数がすべて同じであることを確認する必要があるということです。

それができたら、 を使用します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>";
于 2012-07-22T13:55:15.043 に答える
0

やり過ぎかもしれませんが、同じことが必要で、出力の長さとその長さに基づいて空白を追加するだけで解決しました。

すなわち:

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)

自分の解決策を思い付く前に、このページを見ていたため、解決策を提供したかっただけです。

于 2014-06-29T01:37:37.667 に答える
0

これが私の解決策です。

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

これでは、ゼロが表示されず、ゼロを選択できません。

于 2015-12-02T04:43:59.060 に答える