table の<td>内で右端を揃えたい

Question

お世話になっております。

ラーメン 1000円
餃子 300円

上記のような表を作りたいと思っております。

<table width="83%" id="table01">
<tr>
<th scope="col"><p>料理</p></th>
<th scope="col"><p>価格（税別）</p></th>
</tr>

<tr>
<td><p>ラーメン</p></td>
<td class="tyuuou"><p>\1,000-</p></td>
</tr>

<tr>
<td><p>餃子</p></td>
<td class="tyuuou"><p>\300-</p></td>
</tr>
</table>

table#table01 {
    width:100%;
    border: 1px #E3E3E3 solid;
    border-collapse: collapse;
    border-spacing: 0;
}
table#table01 th {
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
table#table01 td {
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
	vertical-align: middle;
}

table#table01 td.tyuuou {
	background-color: #0ff;
}

とのように表記すると
\1,000-
と\300-
の文末が揃っていないため気持ち悪いと思っております。

<p align="right">\1,000- </p> とすると端過ぎるのでどうしたものかと思っております。

ネット上だとpositionやらalineやら表記があるのですが
効かないので自分の調査能力の低さに絶望しております。

一般的にはどのように解決するのか伺ってよろしいでしょうか？

上記お問い合わせいたします。

Answer 1

おそらく質問の内容はセンタリングされている「\1,000-」に「\300-」の末尾だけを合わせたいということだと思います。
ほかはそのまま。
相対的な指定ばかりなので実現するには正直javascriptなどを使うしかないんじゃないかという気がします。
td.tyuuouの中で最大幅を取得しwidthに設定して～という感じに。

一応無理矢理それっぽく見せることはできるのですが…例えばこれをCSSの最後に追加してください。

table#table01 td.tyuuou p {
    width: 70px; /* 一番大きい桁数の幅 */
    margin: auto;
    text-align: right;
}

ただこれだと見るひとの環境で微妙にずれたりするんですよね…

他には、あまりオススメできませんが を使用して調整するとかですかね。
<td class="tyuuou"><p>&nbsp;&nbsp;\300-</p></td>という感じに。

あと最後に一般的というか自分が普段制作するときは、金額などは右端によせています。

Answer 2

<td class="nedan"><p>\1,000-</p></td>

の場合は

td.nedan p{
    padding-right: 10%;
    text-align: right;
}

でどうでしょう？

idで指定したい場合は#、classで指定したい場合は.（ドット）でOKです。

Answer 3

まとめて指定したければこんな感じでしょうかね。

td:last-child p {
padding-right: 10px;
text-align: right;
}

あとは、右寄せにしたいセルのtdに何かclassをつけて、そのclassに対して指定しても構いません。

HTML側でalign="center"を指定するのは今はあまり使われていません。
（見た目の装飾はCSSでやりましょう、という方針になっているので）

Comments

[taro_nii_chan]

横槍失礼。

paddin-right
は
padding-right
のスペルミスですね。

[moitaro]

ご返答ありがとうございます。

大変申し訳ないのですが
セルtdにclass付ける方法をご助力頂けないでしょうか？

<td class="nedan"><p>\1,000-</p></td>
等

本当に申し訳ないのですが上記お問い合わせいたします。

[NatsumiOki]

＞taro_nii_chanさん
おっと失礼。修正しました。

＞moitaroさん
書かれてるとおりで問題ないので、.nedan p{ここにスタイル}で指定してください。

提示のコードにはpがないのでこれで効くはずです。
もし中身がpじゃない場合のことも考慮してtd自体にスタイルを効かせたい場合は、
「table#table01 td」の詳細度が高いので「table#table01 td.nedan」とします。

[moitaro]

NatsumiOki 様
ありがとうございます。

table#table01 td.nedan
でも
.nedan p
でも
解決しました。

この度は誠にありがとうございます。