6

10 進数の列を含むテーブルが必要です。小数点の前後で長さが異なり、小数点がすべて揃っています。

列幅は、データ セル内の非常に長い数値、またはその列に関連する非常に長い HEADER のいずれかに対応するために、必要に応じて拡大する「流動的な」サイズである必要があります。

整数 (小数点なし) を含むセルには、小数点文字が存在する場合と同じ位置に数字が配置された数値が表示されます。(例: 512 という数字は、"512" ではなく "512" のみを含むセルに正しく配置されている必要があります。)

フォントは無関係であるべきです。等幅は必須ではありません。

最後に、小数 (可視および暗示的!) を揃えたまま、数値を可能な限り列の中央に配置する必要があります。具体的には、小数点文字の前に最も多くの文字 (または、小数点文字が存在しない場合は単にほとんどの文字) を持つセルの「左側の空白のギャップ」は、セルの「右側の空白のギャップ」と同じ幅でなければなりません。最初の小数点以下の文字数が最も多いセル。

表のレイアウトでは、数字の前に正/負の記号などの記号文字や、数字の後に測定単位の頭字語などの文字を追加する必要があるため、最終的な要件では「数字」ではなく「文字」と具体的に言います。

HTML 4.01 仕様、"by the book" では、このようなレイアウトを単純な HTML テーブルで非常に簡単に行うことができます。width="*"(外側の 2 つの colと内側の 2つの col を使用して、4 列の colgroup の 2 つの内側のセルにまたがる 10 進文字のデータを分割しますwidth="0*"。セルを数値の整数部分に右揃えし、セルを左揃えにします。これらのセルをnowrapに設定してから、表の を設定しますcellpadding="0" cellspacing="0" rules="groups"。)

しかし、これは良くないことであり、表の代わりに CSS を使用して書式設定を行うべきだと多くの人が言います。また、意味的に正しいデータを含むテーブルでは、これらの数値を 1 つのセルにそのまま保持する必要があることも理解しています。しかし、目的のフォーマットを実現する CSS メソッドが見つかりませんでした!

1 つの列のテキスト配置を「中央」に設定するだけでは、小数点の位置は維持されません。

私が間違っていない限り、 align="char" を使用しても、明示的な小数点を持たない整数を処理することはできませんが、小数点を持っているかのように整列する必要があります。

整数に小数点文字を追加すると、それを非表示にしても、技術的にデータの整合性が損なわれます。

プロポーショナル (等幅でない) フォントでは、ノンブレーク スペースでデータをパディングすることはできません。そして、このハッキングもデータの整合性を壊します。

固定ピクセル オフセットで位置を指定すると、列が真に「流動的な」幅を持つことができなくなり、ヘッダー セルを含む列内のすべてのセルの内容に合わせてレンダリングされます。ヘッダー セルには、いつでも任意の長さのデータが含まれる可能性があります。 .

レンダリング後にテーブルの結果の幅を読み取り、ピクセル オフセットを動的に計算し、DOM を介して書式設定を書き換えてデータを配置に「スライド」させる JavaScript は遅く、データが飛び回るにつれて視覚的に混乱します。これは、レイアウト目的でテーブルを使用するよりもさらに汚れた、まったく汚いハックです。

「純粋主義者」の CSS レイアウト + HTML セマンティック データ アプローチでは、このシンプルだがしばしば望まれるレイアウトを行うことができないように思えます。誰かが私が間違っていることを証明して、このレイアウトを「適切に」行う方法を教えてくれることを願っています。

4

4 に答える 4

4

これには純粋な html/css ソリューションがありますが、きれいではありません。10 進数で揃えられた列を 2 つの列に分け、間にパディングを入れないようにする必要があります。最初の列には整数値があり、右揃えになっています。2 番目の列には、10 進数と 10 進数値があります。

<table>
 <thead>
  <th>customers</th>
  <th colspan="2">balance</th>
 </thead>
 <tbody>
  <tr><td>John</td>  <td>4</td><td>.45</td></tr>
  <tr><td>Jane</td>  <td>20</td><td></td></tr>
  <tr><td>Jim</td>   <td>2,300</td><td>.64</td></tr>
 </tbody>
</table>

<style>
    th {
        text-align: center;
    }
  td:nth-child(2) { 
      text-align: right;
      padding-right: 0;
    }
  td:nth-child(3) { 
      position: relative;
      left: -0.2em;
      text-align: left;
      padding-left: 0;
    }
</style>

:nth-child セレクターではなく、「.integer」や「.decimal」などのクラスを使用することもできます。その方が堅牢ですが、マークアップを短くしようとしていました。

于 2014-08-25T17:25:52.893 に答える
1

生の HTML でこれを行う方法はありません。この問題を解決するために jQuery プラグインを作成しました。https://github.com/ndp/align-columnを参照してください

破損していないテーブルで簡単に使用できます。

$('table').alignColumn(3);列インデックス 3 を整列します。

于 2013-02-11T23:14:02.170 に答える
0

あなたの要件を考えると、解決策はありません（小数点に合わせるというより単純な問題であっても）。

于 2012-09-04T19:58:10.450 に答える
0

「charoff」属性が必要だと思います。残念ながら、多くのブラウザはそれをサポートしていません...

http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#adef-charoff

各数値を 2 つの文字列に分割しようとしましたか? 例えば

「1234.567」は「1234」になります。と「567」

次に、最初の文字列をセルに入れ (右揃え)、残りの部分を次のセルに入れます (左揃え)。

于 2012-09-04T12:09:39.053 に答える