HTMLで表タイトル部が2行になってしまう

Question

〈div〉
〈table〉
〈thead〉
〈tr〉
〈th class=○○〉番号〈/th〉
〈th class=○△〉名前〈/th〉
〈/tr〉
〈/thead〉
〈/table〉
〈/div〉

現在こんな感じのものがあるとします。

この名前の右側に『種別』を足そうと思い。
〈th class=○○〉種別〈/th〉
というのを名前の次の行に書きました。

そうすると、
種
番号 名前 別

というように、種別のところが縦になってしまいます。
どうしたら、左の2項目と同じように並びますか？

エリアの横幅は広げました。
classの欄には、幅を%で指定するものが記述されています。

分かりにくくて申し訳ありませんが
よろしくお願いします！

Comments

[toutou]

ちょっとしたことなんですが＜＞も半角にしてほしかったな。コピペしてみてみたいときがあるので。

[退会済みユーザー]

class属性で指定しているスタイルシート、及び親コンテナらにかかっているスタイルシートも示していただければ回答しやすいです。

Answer 1

折り返しのことを言っているのでしょうか？
その場合、折り返ししてほしくないclassにwhite-space: nowrap;を指定してあげれば折り返さなくなりますよ。

Answer 2

いくつか試しましたが、縦になる失敗パターンは見つけられませんでした。
一番近いのが <thclass="type">種別</th> という感じで要素名thとクラスを繋げたときに、同じように「番号」の上に「種別」が来ました。⇒ https://jsfiddle.net/esy0xt4u/1/

Table付近のHTMLになにか記述ミスが有ると思われますので、全角になっていないか、タグの閉じ忘れが無いか、半角スペースが必要なところで誤って消していないか、「""」が入れ子になっていないかなどチェックしてみてください。

<div>
<table class="table">
<thead>
<tr>
<th class="no">番号</th>
<th class="name">名前</th>
<th class="type">種別</th> 
</tr>
</thead>
</table>
</div>
```**動くサンプル：**[https://jsfiddle.net/esy0xt4u/](https://jsfiddle.net/esy0xt4u/)

Comments

[a802]

皆さんありがとうございました！

Answer 3

質問内容に、こだわらずに１つ助言をさせていただきます。
見出し部分をクラス分けしなくてもいいのではないでしょうか。

<th>番号</th> <th>名前</th> <th>種類</th>

Answer 4

〈tr〉
〈th class=○○〉番号〈/th〉
〈th class=○△〉名前〈/th〉
〈th class=○○〉種別〈/th〉
〈/tr〉

としたということですよね？
class=◯◯に、とんでもないことを書いているのでは？