1

私は Web プログラミングが初めてで、次の問題があります。

左からデータを表示したい。つまり、これを画面と見なします。

Screen                                                                       2332

2332増加すると、2339900私の画面は次のようになります。

Screen                                                                    2339900

次のようなコードがあります。

    <table class="table">
        <tbody>
        <tr>
            <td><b>Units entered</b></td>
            <td>123</td>
        </tr>
        <tr>
            <td><b>Consumption charges</b></td>
            <td>23232323</td>
        </tr>
        <tr>
            <td><b>Fixed charges</b></td>
            <td>323232323</td>
        </tr>
        <tr>
            <td><b>Net Amount</b></td>
            <td>3223232332</td>
        </tr>
        </tbody>
    </table>

タグに追加しようとしstyle="float: left;"ましたtdが、役に立ちません。

どうすればこれを達成できますか。

注: 偶然にブートストラップがサポートしている場合、私はブートストラップを使用していますか?

前もって感謝します。

4

4 に答える 4

1

デモはこちら

次のようなものを使用してalign="right"ください...

<table class="table" width="100%">
            <tbody>
            <tr >
                <td><b>Units entered</b></td>
                <td align="right">123</td>
            </tr>
            <tr>
                <td><b>Consumption charges</b></td>
                <td align="right">23232323</td>
            </tr>
            <tr>
                <td><b>Fixed charges</b></td>
                <td align="right">323232323</td>
            </tr>
            <tr>
                <td><b>Net Amount</b></td>
                <td align="right">3223232332</td>
            </tr>
            </tbody>
        </table>
于 2013-02-22T09:44:57.543 に答える
1

できることは 2 つあります (少なくとも私の頭の中で!)。

  1. Bootstrap の足場を使用します。

    <div class="span12">
    <div class="row">
       <div class="span3"><strong>Units entered</strong></span>
        <div class="span3 offset6">123</span>
    </div>
</div>

  2. テーブルのスタイルを設定する:

HTML:

    <tr>
        <td><b>Units entered</b></td>
        <td class="align-right">123</td>
    </tr>

CSS:

    .align-right { text-align:right; }
于 2013-02-22T09:45:41.280 に答える
1

Bootstrap にはユーティリティ クラス 'text-right' が最新バージョンに組み込まれているため、そのクラスを TD に適用するだけです。私のjsfiddleはユーティリティクラスが何をするかを示していますが、BootstrapにはすでにCSSがあるので、実際にCSSを含める必要はありません。クラス名を使用するだけです。

詳細はこちら: http://twitter.github.com/bootstrap/base-css.html#typography

これを行う方法は次のとおりです。http://jsfiddle.net/mpPP6/

 .text-right {
     text-align: right;
 }

<table width="100%">
        <tbody>
        <tr>
            <td><b>Units entered</b></td>
            <td class="text-right">123</td>
        </tr>
        <tr>
            <td><b>Consumption charges</b></td>
            <td class="text-right">23232323</td>
        </tr>
        <tr>
            <td><b>Fixed charges</b></td>
            <td class="text-right">323232323</td>
        </tr>
        <tr>
            <td><b>Net Amount</b></td>
            <td class="text-right">3223232332</td>
        </tr>
        </tbody>
    </table>

PS「b」タグを「strong」タグに交換するか、強力なテキストが必要な TD にクラスを追加して、css を使用して設定することをお勧めします。

.myclass {
    font-weight: bold;
}

テーブル セル内ですべてを左揃えにする Bootstrap の .table クラスをオーバーライドするには、次の行をカスタム css ファイルに追加するだけです。

.table .text-right {
    text-align: right;
}
于 2013-02-22T09:46:08.720 に答える
0

使用する

<td align="left">

セルの内容を左揃えにします。あなたの「画面」を見ると、数字は右揃えに見えますか？

于 2013-02-22T09:42:11.123 に答える