CSS使用。表のセルの中で、強制的に改行をするには？

質問

サイトのページを作るのに、表（テーブル）を使っている部分があり、枠線やセル内の色等をCSSで記述しています。

セルの中で、例えば

りんごみかんバナナ

と並んでいるテキストを、セルの幅とは無関係にセル内で

りんご
みかん
バナナ

と強制改行したいのですが、どうすればいいのでしょうか。
＜BR＞を入れるのはCSSを使っている場合は、あまりよろしくないですよね？

よろしくお願いします。

回答No.7

exists · ベストアンサー

こんにちは、

>＜BR＞を入れるのはCSSを使っている場合は、あまりよろしくないですよね？

そんなことないと思いますよ。

スタイルシートは、視覚的な表現のためにありますし、htmllintなんかでやってる。文法チェックは、コンピュータが理解できる構造にマークアップされているかどうかをチェックするものだと思います。
　要は、CSSを使っているから、ダメじゃなくて、CSS使ってなくてもダメなこともあります。

　body内で、裸で使うのは、みっともないですし、
（DTDがstrictの時）やっぱり、pタグで段落を作って、その段落内改行で、br使う分には、非難されることは少ないのではないでしょう。

強制的に改行？する方法は、いろいろあります。

コピペして、スタイルをいろいろ試してみるといいですよ。
インライン要素をブロックで表示
<strong style="display:block;">test</strong>test
<strong >test</strong>test
ブロック要素をインラインで表示
<p style="display:inline;">test</p>
<p style="display:inline;">test</p>
そのほか、文字の区切りに着目して
word-break （IEだけ)なんかを調べてみましょう。
スタイルも、ブラウザ依存の指定があるから、
注意しておかないと、
自分大満足。他人が見たら、何じゃこりゃになってることありますから。

お礼

大変お礼が送れ、汗顔の至りです。

＞自分大満足。他人が見たら、何じゃこりゃになってることありますから。

当方Macユーザーなもので、現在形になっているサイトは、自分の所で見た時が一番崩れがひどいです…嗚呼。

今後精進いたします。どうもありがとうございました。

回答No.6

cyokokichi

何か奇妙な気がするんですが、「りんごみかんバナナ」ってなに？と言うことではないでしょうか。
「それほど重みのある内容ではない」とか「見映えの問題で改行したい」云々の問題ではなくHTMLでは箇条書きで何かを書きたいときにul又は順番に意味がある場合olを使うのではないでしょうか。

それをulやolを使わずに箇条書きをやろうとしたら<br>が多くなる不自然なソースになるのが当然のように思えますが・・・

本当にセルの幅とか改行の問題なのでしょうか。
もしかしたら「りんごみかんバナナ」が本当に必要なの？
何てことも考えられるかも。

お礼

大変お礼が送れ、汗顔の至りです。

HTMLの知識はそれなりにあるのですが、実践経験がほとんどないので、つじつまの合わないことを聞いてしまったかもしれません。
今後精進します。ご回答ありがとうございました。

回答No.5

UKY

> 質問のように単語を羅列する場合は

羅列? それなら #2 さんの言うようにリストにしましょう。項目ごとに印がつくのがいやなら CSS で消せます。(調べてみてください)

<td>
<ul>
<li>りんご</li>
<li>みかん</li>
<li>バナナ</li>
</ul>
</td>

> セパレータを入れる

ここでいうセパレータとは区切り記号のことです。「、」とか「・」とか「 / 」とか。
といっても、リストにするならセパレータは関係ありませんが。

お礼

大変お礼が送れ、汗顔の至りです。

リストも部分的に入れてみました。印を消す方法もあるのですね、いずれ使ってみようと思います。

どうもありがとうございました。

回答No.4

taba

＞改行することによってセル幅が無駄に広がるのを防ぎたい
そういうことなら、TDに横幅を設定する方がよいでしょうね。
テキストは「りんご｜みかん｜バナナ」とか、適当なセパレータを入れるだけにしておけば、特に問題ないと思います。

お礼

何度もありがとうございます。

実は横幅を設定してしまうのも考えたのですが、表は複数あり、各セルに入る文字量がそれぞれかなりちがうので、設定してしまうと見栄え的にあまり美しくなくなってしまうので、今は使っておらず、自動で行が文章量に応じて広がるようにしています。

ただ、質問のように単語を羅列する場合は、横にばかり無駄に広がってしまうので、それを何とかしたいと考えました。

リスト表示にすることも考えましたが、それほど重みのある内容ではないので、あくまで改行による一覧表示（？）＆中央揃えのレベルにとどめたいと思っています。

セパレータを入れるとは、それぞれのセルにわけるということでしょうか？
すみません、それはレイアウト上難しいかもしれません。

全然お礼になっていないですよね…本当にごめんなさい。
まだまだ初心者ですので、考え違いをしている可能性も大です。
ヒント程度で結構ですので、何かありましたらご教示いただけますでしょうか。

回答No.3

taba

HTMLで論理構造を示し、CSSで見栄えを調整するというのが原則なので、その表がどんなもので、なぜその３つの果物を改行したいのかが分からないと、答えは出ないですね。
そもそも<br>は「強制改行」なので、#2さんがお書きのようにリストや個々を独立したブロックにしなくて良いのなら、別に使うことに問題はないと思います。そういう場合に使うためにあるのが<br>ですから。

補足

ご回答ありがとうございます。補足致します。

表は日程表、というものになるでしょうか。
強制改行したいというよりは、改行することによってセル幅が無駄に広がるのを防ぎたいというのが主な目的です。

回答No.2

noname#14318

> ＜BR＞を入れるのはCSSを使っている場合は、あまりよろしくないですよね

CSSを「使っていなくても」あまりよろしくないと思いますが…。

<td>内には確かインライン要素もブロック要素も
入れることができるので、<td>内で
<ul>や<p>を使えばいいのでは？

<td>
<ul>
<li>りんご</li>
<li>みかん</li>
<li>バナナ</li>
</ul>
</td>

あるいは

<td>
<p>りんご</p>
<p>みかん</p>
<p>バナナ</p>
</td>

行間やインデント調整は、それこそCSSでやればいいんだし…。

また、論理的におかしくならないのであれば
りんご、みかん、バナナを
それぞれ独立したセルにしてもいいかも。

なお、私はテーブル自体をほとんど使わない人なので
よろしくないことを言っているかもしれません。

お礼

大変お礼が送れ、汗顔の至りです。

改行したい場所も色々なパターンがあり、現在<br>と<ul>で対応しています。

どうもありがとうございました。

回答No.1

BLUEPIXY

やっぱ<br>だとおもいます
よろしくない場合というのは、
<br clear="all">みたいなclearアトリビュートだと思います。

お礼

大変お礼が送れ、汗顔の至りです。
<br>でも大丈夫と伺い、現在こちらで対応しています。どうもありがとうございました。