-Trip Mania- Bootstrapを使って、tableのセルの文字を右寄せにする方法

Bootstrapを使って、tableのセルの文字を右寄せにする方法 2013.12.25 19:24

-Trip Mania- MacBook Air買いました。の投稿の中の表の部分、例えば次の表は、

	Air 11	Pro 15	差異
重量(本体)	1.08kg	2.54kg	-1.46kg
重量(電源アダプタ)	0.20kg	0.30kg	-0.10kg
合計	1.28kg	2.84kg	-1.56kg

<table class="table table-hover table-bordered">
  <thead>
    <tr>
      <th> </th>
      <th><div class="text-right">Air 11</div></th>
      <th><div class="text-right">Pro 15</div></th>
      <th><div class="text-right">差異</div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>重量(本体)</td>
      <td><div class="text-right">1.08kg</div></td>
      <td><div class="text-right">2.54kg</div></td>
      <td><div class="text-right">-1.46kg</div></td>
    </tr>
    <tr>
      <td>重量(電源アダプタ)</td>
      <td><div class="text-right">0.20kg</div></td>
      <td><div class="text-right">0.30kg</div></td>
      <td><div class="text-right">-0.10kg</div></td>
    </tr>
    <tr>
      <td>合計</td>
      <td><div class="text-right">1.28kg</div></td>
      <td><div class="text-right">2.84kg</div></td>
      <td><div class="text-right">-1.56kg</div></td>
    </tr>
  </tbody>
</table>

と書いているわけです。ここに行き着くまで少し大変でした。

tableのセル<td>の中で文字の右寄せがうまくいきませんでした。

ベタな方法だと、セル内の文字を右寄せするときには、<td align="right"> と書くのですが、Bootstrapを使っていると通用しない。

表でなければ、

左寄せ

中央揃え

右寄せ

<p class="text-left">左寄せ</p>
<p class="text-center">中央揃え</p>
<p class="text-right">右寄せ</p>

と書くと、左寄せ、中央揃え、右寄せは反映されていますが、例えば、

<table class="table table-hover table-bordered">
  <tr>
    <td class="text-left">左寄せ</td>
  </tr>
  <tr>
    <td class="text-center">中央揃え</td>
  </tr>  
  <tr>
    <td class="text-right">右寄せ</td>
  </tr>
</table>

左寄せ

中央揃え

右寄せ

と表示されて、文字は全部左寄せのままです。

いろいろと検索して、css - Is there anything built into to Twitter Bootstrap 2.0 to align table contents? - Stack Overflowに辿り着きました。どうやら、

<td>
  <div class="text-right">...</div>
</td>

と、<td>の中に<div class="text-right">...</td>とするのが良いみたいです。

メモネット Posted by .(JavaScript must be enabled to view this email address)

次の記事：Geekbench3でMacBook Airを計測してみた。

前の記事：餃子の王将社長銃撃事件まとめ

Bootstrapを使って、tableのセルの文字を右寄せにする方法 2013.12.25 19:24

最近の記事