HTMLの改行について

Question

HTMLCSSを使って、ホームページを作成しているところなのですが、どうしてもわからないところがあるため、質問させていただくことにしました。

写真を見てわかる通り、個人指名料、男女指名料がご覧にいただけるとおもいますが、なぜかこの二つの単語が何らかの理由で改行されてしまいます。

改行させないために、spanタグ、nobrタグを使う、css要素でインライン要素にするなど方法がありますが、これらのような改行を無理やりさせないやり方をしないで、解決したいと考えています。

大変恐縮ですが、どなたか分かる方ご教授願えないでしょうか？

HTML

<p class="op-tit"> <strong>&lt; その他 &gt;</strong> </p> <table class = class5> <tr> <th valign="top" class="op-th">個人指名料：</th> <td valign="top" class="op-td">300円(税込) お客様に合ったスタッフを指名できます。 </td> </tr> <tr> <th valign="top" class="op-th">男女指名料：</th> <td valign="top" class="op-td"> 100円(税込) 男女別にスタッフを指定できます。 </td> </tr> </table> **CSS** .class5{ width: 100%; } .op-tit{ font-size:26px; color:#a40000; padding-bottom:14px; font-family: "A-OTF フォーク Pro", "Arial", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; }

.op-th{
font-size:19px;
color:#0e0e0e;
font-family: "A-OTF フォーク Pro", "Arial", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";

}

.op-td{
font-size:18px;
color:#313131;
line-height:26px;
}

Answer 1

テーブルの幅は、なかなかに制御がややこしいものです。

とりあえず、「<th>の中で改行させたくない」というのなら、それを意味するCSSを追加しましょう。

.op-th{
  /* 他の記述は省略 */
  white-space:nowrap;
}

Answer 2

.op-th に white-space: nowrap; を指定すればいいと思います。
参考：MDN white-space

Answer 3

これを追記

.op-th{ 
  white-space:nowrap;
}

あと、

<table class = class5>

は、正しくは、

<table class="class5">

ですね。

Comments

[LibertyBell3]

かぶりまくりｗ

[revoiot]

ご回答ありがとうございます。大変恐れ入りますが、もう一つご回答お願いできないでしょうか？

個人指名料：　　300円

上記の：と３の間があまりに間が開いているのですが、もう少し間を埋めることはできないでしょうか？

これらはテーブルタグにより成り立っており、ちょうど真ん中に線が入っているような状態(boarder=を付けたとき)になっています。

[LibertyBell3]

その場合、.op-thにwidth:7em;(これは目安として7文字分)って指定すれば、
いけるかと。

[revoiot]

大変恐縮ですが、op-thにwidth:7em;と指定しても、変化がございませんでした。

[LibertyBell3]

width追記しても、th/tdは半々くらいになっちゃいますか？
それだとなにかしらがおかしいのですが、
7emとしたのは、ブラウザによって差が合ったりするのでなのですが、
ぴったりくっつけるならば、.op-thにtext-align:right;を付け足せば
良いと思います。

Answer 4

font-size:19px; を15pxくらいにすればいい

Comments

[revoiot]

ご回答ありがとうございます。なぜこちらは改行されてしまうのでしょうか？

[toutou]

文字が大きすぎて入らないからでは。