【先着1,000名様！】1,000円分をプレゼント！

画面幅に合わせてテーブルのカラム数を変えたい

解決済

  • 質問者：_ranco_
  • 質問日時：
  • 回答数：5件

TABLEの１行はTRの中にTDを羅列して定義しますが、ユーザのブラウザの画面幅が大きいときは５カラム、小さいときは３カラムなどと、自動的に加減するやりかたが、HTMLやCSS（など）にありますでしょうか？
（各セルがまったく同一性質のリンクテキストなので、１行のカラム数が変わっても意味的にはまったく問題ありません。）

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「LINE やり方」に関するQ&A： LINEでブロックして削除した相手をもう1度友達になることは出来ますか？ やり方 教えてください

さらに表示

「テーブル 種類」に関するQ&A： 種類別のテーブル作成方法について

「大中小３個」に関するQ&A： 数学の問題です 大中小3個のサイコロを投げる時、3個の目が異なる場合は何通りあるか？ 240

「left 意味」に関するQ&A： leftの意味の捉え方

「やり方 ライン」に関するQ&A： ラインで既読つけないで返信する方法ありますよね？友達がやってるのですがやり方がわかりません。知りた

「カラム 意味」に関するQ&A： WHERE カラム名 <> ''の意味

「コラム 意味」に関するQ&A： スマフォ関連の新聞コラムの意味を教えてください。

「CSS 基本」に関するQ&A： cssの基本的なこと。

「意味 width」に関するQ&A： cssでｈｔｍｌ｛width:100%;｝の意味がわかりません

「UL 意味」に関するQ&A： ul の意味が分かりません

A 回答 (5件)

No.3ベストアンサー

  • 回答者： abril
  • 回答日時：

>> ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です


>よろしかったら、やり方を教えてください。

過去にulでアイテムを並べる方法について回答したスレッドがありますので、そちらを参考にでもして下さい。
http://oshiete1.goo.ne.jp/qa3870470.html

要は子要素のliを左にフロート（floatの意味は読んで字のごとく「浮かせる」です。）させることでコラム的に見せる、という事です。上記では固定値の幅の中でアイテムを一行に2個づつになる様に並べていますが、ウィンドウサイズによって流動的にするのであれば、ulの全体幅は決めず自動もしくは100%で、という事になります。

> いろいろ調べたら、JavaScriptでwindow.innerWidthを取得し、大中小３種類ぐらいのテーブルをif～～で仕分けることは可能なようです。

ANo.2の回答者様も言及されていますが、内容が「表」として相応しいものなら、tableでマークアップした上でお好きな方法でどうぞ。
「各セルがまったく同一性質のリンクテキスト」という文を読む限りでは、内容は単なる「リスト」の様に見受けられましたので、ならばulを使用するのが一番妥当ではないか、と思ったまでです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。教えていただいたリンク、明日トライしてみます（今宵は、ばてましたので…）。

通報する
お礼日時：2008/06/25 20:49

No.5

  • 回答者： 0wl
  • 回答日時：

勉強にさける時間が２時間程度なら


http://www.kanzaki.com/docs/html/lesson1.html
http://www.kanzaki.com/docs/html/htminfo17.html
をセットで。テーブルレイアウト経験者は勘違いしていることが多いので、まっさら以下からのスタートと思って丁寧に読んでみてください。


もうすこしじっくり勉強できるなら
http://www.kanzaki.com/docs/htminfo.html
あたりを抑えて。

ベストといわれれば、kanzakiさんの所を推しますが、ちょっと、固い感じです。基本の基本だけサイトです。難しくないです。くれぐれもこれまでの知識は捨てて真っ白頭で読んで、試してみてください。

基本を抑えたら、リファレンス（プロパティの辞書のようなもの）で何ができるのかサーっとみて、実践。おっと！こんなんしたいと思うページを見つけたら、ソースを見てこうなってるんだぁと人のアイデアを盗んでいけば、ＯＫ。お手本にならない悪いソースも基本がわかっていれば見分けられる筈です。実践していけば、よく使うことはすぐ覚えちゃうほど少ないです。

先に、float:left;と書きましたが、実はある場所をインラインにしてもできます。とやり方はいろいろあります。適材適所ということで。floatは大きな問題があるのです。

インライン・ボックスの違い・フロートのクリア・ボックスモデルあたりが躓きやすいし、モードの違いで解釈が違うことも把握していけば、正しくｃｓｓを書いても、各ブラウザの方言に書き直さないと望む表示はできないのだけど、……と言うことはまだ先のお話。


本を希望のようですが、入門書は全く知らないです。サイトで勘弁してください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

0wlさん、そのほかのみなさま、ありがとうございました。
今度時間があるとき、floatなるものを究めたいと思います。
kanzakiサイトも、じっくり読ませていただきます。

通報する
お礼日時：2008/06/27 19:57

No.4

  • 回答者： 0wl
  • 回答日時：

テクニックではなく、「基本」ですよ。

と一応言っといて、
もしかしたら、表にしたかったのは罫線？と思いましたので、先のheadのstyle｛　　　｝内の
どこかの、「；」の後ろに
border:red 3px solid;
を追加してみてください。赤い、3ピクセルの実線で囲まれます。

さらに、すき間が欲しければ、罫のそとなら
margin:20px;/*ボックスの外側の空きです*/
罫と文字の間なら
padding:20px;/*ボックスの内側の空きです*/
中身をピンクで塗りたければ、
background:#FFDFFF;
等を追加してみてください。

これらはすべてｃｓｓの基本です。テクニックではありません。興味があれば文章構造・論理構造などにも言及した本やサイトで学ばれることをお奨めします。罫線をひくにはこのタグ、太くするのは<b>みたいな説明の場所での入門は混乱のもとです。避けられることをお奨めします。

この回答への補足

> 文章構造・論理構造などにも言及した本やサイトで
これがベスト、という本を教えてください。絶対、買います！。

補足日時：2008/06/26 08:45
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： 0wl
  • 回答日時：

それ、表じゃなく、見栄え目的に表にされてるだけですよね？


ｃｓｓは見栄えと構造の分離を推奨します。だから、意味的に表でないのに見た目に段にしたいからと、tableにすることを奨めません。多分、全体に効くのでセレクタを理解していないと実用は難しいと思います。

何かの子要素のp指定とわかれば簡単なのですが、今言われていることだけですとこんな感じですね。高さががたがただとちょっと難ありですが、基本的には以下で
<head></head>の中に
<style>
p{　　　　　/*pのことだよって意味*/
width:100px;/*ここに幅の指定を数値で入れます*/
height:100px;/*ここに高さの指定を数値で入れます*/
float:left;　/*左に詰めてね　って意味*/
}
</style>
を入れます
<body>部分は、
これまで、<td></td>の中身を<table>でななく
<body>
<p>あああああ</p>
<p>いいいいい</p>
<p>ううううう</p>
<p>えええええ</p>
<p>おおおおおなどとします</p>
<p>かかかかか</p>
<p>ききききききききききき</p>
<p>くくくくくくくくくくく</p>
<p>けけけけけけけけけけけけけけけけけけけけけけけけ</p>

</body>

それで、ブラウザの幅をいろいろ伸ばしたり縮めたりして試してください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。初めての体験ですが、不思議なことが起きますね。まるで、手品みたいですね。これはたぶん、abrilさんの回答とも関連があるテクニックなんでしょうね。

通報する
お礼日時：2008/06/25 20:54

No.1

  • 回答者： abril
  • 回答日時：

> ユーザのブラウザの画面幅が大きいときは５カラム、小さいときは３カラムなどと、自動的に加減するやりかたが、HTMLやCSS（など）にありますでしょうか？



「HTMLやCSS」にはその様な機能はありません。HTMLはマークアップ言語であり、CSSはスタイルを定義するものであり、上記の様な自動生成的な事はできません（ちなみにコラム数を増減するのではなく、ウィンドウサイズに応じてコラム幅を自動的に拡大・縮小させる、というのであればCSSでできます）。
※ただし、これがtableではなく、ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です（色々レイアウト上の条件はありますが）。

この回答への補足

いろいろ調べたら、JavaScriptでwindow.innerWidthを取得し、大中小３種類ぐらいのテーブルをif～～で仕分けることは可能なようです。

補足日時：2008/06/25 12:38
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

お答え、ありがとうございます。やはり、ないですか、残念です。

> ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です
よろしかったら、やり方を教えてください。

通報する
お礼日時：2008/06/25 12:02

このQ&Aに関連する人気のQ&A

「LINE やり方」に関するQ&A： ネコのノミ退治！！

さらに表示

「コラム 意味」に関するQ&A： 『ガッデム』ってどういう意味ですか？

「カラム 意味」に関するQ&A： Nullってどういう意味ですか？

「left 意味」に関するQ&A： セルの文字列後ろのスペース削除

「意味 width」に関するQ&A： Ｗ／Ｄ／Ｈ　アルファベットの意味を教えてください

「UL 意味」に関するQ&A： 電子ピアノを買うか　アップライトにサイレント機能を付けるか・・。

「意味 body」に関するQ&A： 玉音放送の「耐え難きを耐え、忍び難きを忍び」の意味

「大中小３個」に関するQ&A： 山登り初心者です。ザックなどについて教えて下さい。

「テーブル 種類」に関するQ&A： 複数テーブルをひとつのテーブルにしたいのですが

「float 意味」に関するQ&A： float型とdouble型の変数の違いを教えてほしいです

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSS li float 2列組み

写真とテキストの入った<div>をliでfloat:left指定して
■■
■■
■■
のように2列に表示させました。

<li>
<div>
写真とテキスト
</div>
</li>
これを繰り返す

ただテキストの量によって
■■
　■
■　
　■
のように崩れてしまうことが分かりました。
何か良い方法はないでしょうか？
よろしくお願い致します。

Aベストアンサー

質問者様のイメージに完全には合わないかもしれませんが、妥協案が2つあります。
下記サンプルはwidth: 500pxの領域に、左から一定の位置に上揃えで2アイテムづつ画像＋テキストのブロックを並べる、という想定です。
検証環境はIE6/7、Firefox2.0～、Opera9.25 on Windows XPのみです。

ただし、どちらの場合も質問者様のコメントにありました背景画像でボトム合わせにしたライン、というのを上記4環境で完全に同じ結果を得ることはhackを使ってもできませんでした。
【妥協案A】では下記CSSサンプル中の<li>に対するbackgroundプロパティを：
---------------------------------------------------------------------
background: url(../images/line.gif) repeat-x bottom left;
---------------------------------------------------------------------
と定義すれば、IE6/7を除く他環境では下揃えでFIXしてくれているのですが、IE6/7ではスクロールバーが発生した場合は下がりきった位置でないと表示しません。で、IE6はアンダースコア・ハックで
---------------------------------------------------------------------
_background-attachment: fixed;
---------------------------------------------------------------------
を追加すれば固定位置に表示されるのですが、IE7はこれを適用すると逆に背景が表示されなくなりますので、結果、IE7ではこのレイアウトを実現するのは無理でした。
ですので、ラインを画像ではなくborderプロパティを使って引く、という仕様にサンプル中では変更しています。

---------------------------------------------------------------------
【妥協案A】overflowでスクロールバーが出てもよい
---------------------------------------------------------------------
【HTMLサンプル】
---------------------------------------------------------------------
<ul class="sample">
<li>
<img src="./images/img_a.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_b.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_c.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_d.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキスト</p>
</li>
</ul>
---------------------------------------------------------------------
【CSSサンプル】
---------------------------------------------------------------------
ul.sample {
display: inline-block;
width: 500px;（親要素で幅が決まっていれば特に定義不要）
list-style: none;
padding: 0;
margin: 0;
}
ul.sample:after {
content: "";
display: block;
clear: both;
}
ul.sample li {
width: 240px;（500pxを2等分したものから更に右マージン10pxを引いた値）
height: 60px;（これは適当なので、適切な値を定義）
float: left;
overflow: auto;
border-bottom: solid 1px #000000;
padding: 0;
margin: 10px 10px 10px 0;（上下マージンの値はお好みで）
}
ul.sample li img,
ul.sample li p {
margin-right: 20px;（overflowでスクロールバーが出た時に中のデータの右端がスクロールバーに隠れてしまうのを防ぐ為の余裕）
}
---------------------------------------------------------------------
メリット：テキスト量やフォントサイズの変更に左右されることなく、固定値の高さを保ったままアイテムを均一に並べて行くことが可能。中に入るデータ量を気にせず、どのアイテムにも同じマークアップとクラスが適用される為、アイテムの増減があってもメンテナンスが楽。
デメリット：スクロールバーが発生するアイテムの場合、一瞥で全体を見ることができない。

---------------------------------------------------------------------
【妥協案B】スクロールバーを出さず、アイテム全体を見せたい。
---------------------------------------------------------------------
【HTMLサンプル】
---------------------------------------------------------------------
<ul class="sample first-row">
<li>
<img src="./images/img_a.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_b.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
</ul>

<ul class="sample">
<li>
<img src="./images/img_c.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_d.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
</ul>

<ul class="sample">
<li>
<img src="./images/img_c.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_d.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキスト</p>
</li>
</ul>
---------------------------------------------------------------------
【CSSサンプル】
---------------------------------------------------------------------
ul.sample {
（【妥協案Aと同じ】）
}
ul.sample:after {
（【妥協案Aと同じ】）
}
ul.another li {
width: 200px;
float: left;
padding: 10px 0 0 0;
margin: 10px 10px 10px 0;
border-top: solid 1px #000000;
}
ul.another li img,
ul.another li p {
（【妥協案Aと同じ】）
}
ul.first-row li {
border-top: none;
margin-bottom: 0;
}
---------------------------------------------------------------------
メリット：アイテム全体が表示される。
デメリット：アイテムのデータ量によって、下の余白はまちまちとなる。2アイテムづつ上揃えにするには、2アイテム毎に<ul>～</ul>でマークアップしなければならない。ボーダー位置を揃えて見せる為に、border-bottomではなくborder-topで指定している為、最初の列には常に別のクラスも併合しておかなければならず、最後の列はボーダーを付けられない。

質問者様のイメージに完全には合わないかもしれませんが、妥協案が2つあります。
下記サンプルはwidth: 500pxの領域に、左から一定の位置に上揃えで2アイテムづつ画像＋テキストのブロックを並べる、という想定です。
検証環境はIE6/7、Firefox2.0～、Opera9.25 on Windows XPのみです。

ただし、どちらの場合も質問者様のコメントにありました背景画像でボトム合わせにしたライン、というのを上記4環境で完全に同じ結果を得ることはhackを使ってもできませんでした。
【妥協案A】では下記CSSサンプル中の<l...続きを読む

他の回答も見る

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか？
<TD>タグや<TR>タグのところでいじくるのですか？

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
＃2の方法ですね。

テーブルごとやセル（<TD>）ごとにサイズを変更するには
スタイルシート（CSS）を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル（<TD>）ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

＃1の方法だとページ内の全てのセル（<TD>）に設定することになります。

スタイルシート（CSS）はこれら以外にも
いろいろな設定方法があります。

他の回答も見る

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか？
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、３つ以上なら
別途function化したほうが、可読性が高くなると
思います。

他の回答も見る

QＰＣの画面を縮小したらサイズに合わせて改行させたい

こんにちは。

メモ帳を使ってホームページを作成しています。
長い一文など<br>を使って改行しているのですが、パソコンの画面を縮小すると、横スクロールバーが出てきて見にくいものになってしまいます。
他のサイトさんを見ると、画面サイズを縮小すると自動的に見やすく改行され、横スクロールバーも出てこないのですが、（最大化した時と改行していている位置が違います）どういうタグ等を使ったらこのように設定できるでしょうか？

作成については初心者で、本を見ながらやっている状態です。
使用しているブラウザはＩＥ7で、WindowsVistaです。
なにとぞよろしくお願い申し上げます。

Aベストアンサー

divとtableの場合のサンプル
<div>や<table>の横幅をパーセント指定します。
固定値（500px）などにすると改行されたようには出来ません。

<html>
<head>
<title>sample</title>
</head>
<body>
<div style="width: 100%;word-break:break-all;">
<p><!-- 長い文章を書き込む --></p>
</div>
</body>
</html>

<html>
<head>
<title>sample</title>
</head>
<body>
<table style="width: 100%;word-break:break-all;">
<tr>
<td><!-- 長い文章を書き込む --></td>
</tr>
</table>
</body>
</html>

※英文ようにword-breakを追加しています。

他の回答も見る

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL：http://www.htmq.com/style/word-break.shtml

他の回答も見る

Qの高さ固定。情報増加時、高さ自動変化

<table>で<td>の中に入れる文字の行が
多くなったり少なくなったりする形のもので
少ないときは高さを150pxに固定し、
多くなったときは行数に合わせて
自動的に高さが変化するものを作りたいです。
サンプルを作ってみました。
アドバイスをお願いいたします。

<html>
<head>
<title></title>
<body>
<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table>

<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

<table>で<td>の中に入れる文字の行が
多くなったり少なくなったりする形のもので
少ないときは高さを150pxに固定し、
多くなったときは行数に合わせて
自動的に高さが変化するものを作りたいです。
サンプルを作ってみました。
アドバイスをお願いいたします。

<html>
<head>
<title></title>
<body>
<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table...続きを読む

Aベストアンサー

こんばんは。

TABLEのheight:150px;をやめる。
TDにstyle="min-height:150px;"

他の回答も見る

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL：http://www.htmq.com/style/border-spacing.shtml

他の回答も見る

Qtable 幅固定で、端までいったら自動折り返し　タグ

クリックありがとうございます、また質問させて頂きます。
今メモ帳でホームページを作成中です。
素人質問かもしれませんが、お力貸して下さると助かります。

小説ページを作成しているのですが、その中でTABLEを幅固定して自動折り返しさせる方法がわかりません。
色々なサイト様を巡らせて頂き、

<table width="750" cellpadding="20" border="0" style="table-layout:fixed;">

↑こういうタグを打った所（勿論最後に</table>とかつきます）、幅は固定されるものの、width=750の大きさのラインで文字が折り返されず途切れてしまいました。
（メモ帳には「テストテストテストテスト」と打っていても、ページを開くと「テストテストテス」で文章が終了してたりする、ということです。）
また、table width="数字"や、パーセンテージで設定すると幅自体が固定されません。

検索で、半角英数字の連打（例：aaaa）は普通の設定だと折り返しされないと知ったため、「テストテストテスト」などの単語を連続して試しています。
最終手段の、<br>使用はなるべく控えたいと思っています。
上手く固定出来るタグを教えて頂けると嬉しいです。
宜しくお願いします。

クリックありがとうございます、また質問させて頂きます。
今メモ帳でホームページを作成中です。
素人質問かもしれませんが、お力貸して下さると助かります。

小説ページを作成しているのですが、その中でTABLEを幅固定して自動折り返しさせる方法がわかりません。
色々なサイト様を巡らせて頂き、

<table width="750" cellpadding="20" border="0" style="table-layout:fixed;">

↑こういうタグを打った所（勿論最後に</table>とかつきます）、幅は固定されるものの、width=750の大きさのラインで文...続きを読む

Aベストアンサー

以下のように指定すると改行されました。
ちょっと今のところ他に方法が思いつきません・・・

td {
word-break:break-all;
}

独自拡張なのでちょっと迷いますね。

他の回答も見る

Q

教えていただけますか？
<input type="text" readonly/>を表示したときに表示される枠を
消すことができますか？
何故？と聞かれたら困りますが。。。
よろしくお願いします。

Aベストアンサー

inputにstyle=border:none;を付けると枠線消えましたよ
（Firefox、IE7では確認出来ました）

他の回答も見る

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列（以下、about列）を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>
：
：
<table>
<tr>
<th class="about">右が１へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト１</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト２</a></td>
</tr>
<tr>
：
：
</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への～"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列（以下、about列）を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>
：
：
<table>
<tr>
<th class="about">右が１へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト１</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト２</a></td>
</tr>
<tr>
：
：
</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報