出産前後の痔にはご注意!

cssに「table-layout: fixed;」を記載してテーブルの幅が固定になるように設定しています。
設定していますが、ブラウザの幅を狭めると

テスト1|テスト2|テスト3

と表示されていたものが

テスト1
テスト2
テスト3

と、レイアウトが崩れてしまいます。
<table>、<tr>、<td>タグにつけてみましたが、全て崩れてしまいます。
幅や高さ等も指定していますが、何かが足りないのでしょうか。

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

A 回答 (2件)

table-layout:fixed;と一緒にwidthを指定されましたか?


両方設定しないと固定されません。
    • good
    • 1
この回答へのお礼

返答遅れて申し訳ありません。

widthを指定しましたが変わり無しでした。
ですが、さらに外側のタグにwidth等を指定すると固定することができました。
なぜ、固定できるようになったかが、いまいち分かりませんが
解決できたため締め切らせていただきます。

お礼日時:2013/02/07 11:59

fixedの意味を取り違えている?


tableは本来、すべての行について内容を算出してレイアウトしていくのですが、fixedが指定してあると一行目から描画を始めます。
 単にそれだけです。
 ⇒17.5.2 表の幅を計算する(Table width algorithms: the 'table-layout' property)( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 実際の計算方法は上記を参考に・・

 なお、tableは決してレイアウトには使ってはなりませんから、ユーザビリティを考えるとtable-lyoutの値はautoが望ましいです。描画を早くするためにセルの最大文字数に合わせて、width:5emとかを一行目のセルに指定すると良いでしょう。

この回答への補足

fixedが幅固定できないということは
width:5emを使えばよいということでしょうか?

補足日時:2013/01/21 21:37
    • good
    • 0

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

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

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

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

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

Qテーブルの幅固定について

テーブルの幅固定を以下のように行っているのですが文字が指定した幅を超えると、
幅を指定してるにも関わらず、文字が改行せずに幅が伸びてしまいます。
自動的に改行になるとばかり思っていました。
<br>での改行は考えていないので、テーブルの幅を絶対的に固定する方法ありますでしょうか?

<table width="50" border="0" style="background-color: #cecece">
<tbody>
<tr>
<td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
</tr>
</tbody>
</table>

Aベストアンサー

HTMLでは「単語」は改行されないようになっています。
"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" はスペースを含まない英数字ですので、単語と見なされてしまうのです。

CSSの word-break:break-all を使えば、どんな状況でも強制的に改行します。(CSSの規格外でIE限定です)
ただし、単語の区切りによる改行が無効になるので、視認性は下がります。

参考URL:http://pinotan.blog15.fc2.com/blog-entry-106.html

Qtd width="180" と固定してるのですが・・

<div style="width:500;height:220;overflow:auto;
scrollbar-3dlight-color:#9acd32;
scrollbar-arrow-color:#9acd32;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#9acd32;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#9acd32;
scrollbar-track-color:#ffffff;
">
<table style="font-size:13px; color:magenta;"><tr align="center">
<td width="180"><img src=""></td>
<td width="180"><img src=""></td>
<td width="180"><img src=""></td>
<td width="180"><img src=""></td>
<td width="180"><img src=""></td>
</tr></table>
</div>

img には 110×150 のサイズの写真を入れています。
div width="500" にしているので、180×3=540 ですから3枚目のimgが途中で切れて、残りが横スクロールに引っ込むと思ってたのですが、実際にはimgがぎゅうぎゅうに詰まって4.8枚見えるようになります。

何故 td width を固定しているのに変動してしまうかがわかりません。
どうすれば img と img のあいだを余裕もたせて表示することができますでしょうか?
よろしくご教授のほど願います。

<div style="width:500;height:220;overflow:auto;
scrollbar-3dlight-color:#9acd32;
scrollbar-arrow-color:#9acd32;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#9acd32;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#9acd32;
scrollbar-track-color:#ffffff;
">
<table style="font-size:13px; color:magenta;"><tr align="center">
<td width="180"><img src=""></td>
<td width="180"><img src=""></td>
<td width="180"><img src=""></td>
<td width="180"><...続きを読む

Aベストアンサー

これではいかがでしょう?

<div style="width:500px;height:220px;overflow:auto;
scrollbar-3dlight-color:#9acd32;
scrollbar-arrow-color:#9acd32;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#9acd32;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#9acd32;
scrollbar-track-color:#ffffff;
">

<table width="900" style="font-size:13px; color:magenta;">
<tr align="center">
<td width="180"><img src="" width="110" height="150" alt=""></td>
<td width="180"><img src="" width="110" height="150" alt=""></td>
<td width="180"><img src="" width="110" height="150" alt=""></td>
<td width="180"><img src="" width="110" height="150" alt=""></td>
<td width="180"><img src="" width="110" height="150" alt=""></td>
</tr>
</table>
</div>

これではいかがでしょう?

<div style="width:500px;height:220px;overflow:auto;
scrollbar-3dlight-color:#9acd32;
scrollbar-arrow-color:#9acd32;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#9acd32;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#9acd32;
scrollbar-track-color:#ffffff;
">

<table width="900" style="font-size:13px; color:magenta;">
<tr align="center">
<td width="180"><img src="" width="110" height="150" alt=""></td>
<td wid...続きを読む

Qテーブルのヘッダとボディの幅がズレルのを防ぐ

ヘッダとボディの幅を可変にし、かつズレないようにするにはどうすればよいのでしょうか?

Aベストアンサー

>ヘッダを固定してボディのみスクロールするため、CSSでthead の tr と、tbody に float:left; を指定しているからです。

 floatの用途を間違えています。
 floatは本来、テキスト中に挿絵などがあるとき、その要素をフローとさせて、その周囲にテキストを回りこませるためのものです。floatでブロックを並べるテクニックは、確かによく見かける手法ですが、そのために文書構造を変えなければならない----floatさせる要素は回り込む要素の前に書かなければならない---という重大な問題があります。これはHTMLやスタイルシートの目的とかけ離れています。使うならabsoluteでしょう。

 しかし、floatやabsolute、fixedは、他の要素から完全に切り離されますから、列のセル幅を引き継げません。tableの描画ルーチンに従わなくなります。

 もう一点、tableの扱いはブラウザごとに大きな差があります。また根本的な問題として、tableには他のブロック要素に使えるプロパティが使えません。height/overflowなど・・

 そのような表を作成される場合は、table,thead,tfoot,tr,tdの各要素をblock要素に置き換えて、幅をセルごとにきちんと指定して配置するのが無難です。

_<table class="scroll" summary="scrollTbody">
__<thead>
___<tr>
____<th>あ行</th><th>か行</th><th>さ行</th><th>た行</th>
___</tr>
__</thead>
__<tbody>
___<tr>
____<td>あ</td><td>か</td><td>さ</td><td>た</td>
___</tr>
___<tr>
____<td>あ</td><td>か</td><td>さ</td><td>た</td>
___</tr>
___<tr>
____<td>い</td><td>き</td><td>し</td><td>ち</td>
___</tr>
___<tr>
____<td>う</td><td>く</td><td>す</td><td>つ</td>
___</tr>
___<tr>
____<td>え</td><td>け</td><td>せ</td><td>て</td>
___</tr>
___<tr>
____<td>お</td><td>こ</td><td>そ</td><td>と</td>
___</tr>
___<tr>
____<td>あ</td><td>か</td><td>さ</td><td>た</td>
___</tr>
___<tr>
____<td>い</td><td>き</td><td>し</td><td>ち</td>
___</tr>
___<tr>
____<td>う</td><td>く</td><td>す</td><td>つ</td>
___</tr>
___<tr>
____<td>え</td><td>け</td><td>せ</td><td>て</td>
___</tr>
___<tr>
____<td>お</td><td>こ</td><td>そ</td><td>と</td>
___</tr>
__</tbody>
_</table>
に対して
table.scroll,table.scroll *{display:block;margin: 0;padding:0;line-height:30px;}
table.scroll{width:428px;margin-top:50px;border-bottom:1px solid gray;}
table.scroll thead,table.scroll tbody{width:100%;border:none;}
table.scroll tbody{height:94px;overflow:auto;width:428px;}
table.scroll thead th,table.scroll tbody td{float:left;width:100px;border:solid gray 1px;}
/* 本来はfloatではなくdisplay:inline-blockとすべきだが後方互換のためやむなくfloat */
table.scroll tbody,table.scroll tbody tr{clear:left;}

>ヘッダを固定してボディのみスクロールするため、CSSでthead の tr と、tbody に float:left; を指定しているからです。

 floatの用途を間違えています。
 floatは本来、テキスト中に挿絵などがあるとき、その要素をフローとさせて、その周囲にテキストを回りこませるためのものです。floatでブロックを並べるテクニックは、確かによく見かける手法ですが、そのために文書構造を変えなければならない----floatさせる要素は回り込む要素の前に書かなければならない---という重大な問題があります。これはHTML...続きを読む

Qテーブルの項目幅を固定するには?

ものすごく簡単な質問だと思うんですけど、なんせ初心者なのでどうかわかりやすく教えてください。

テーブル定義で%で列幅を指定しているのに、その中に文字をいれたとき、
その文字幅にあわせて幅がかわるんです。
そもそも%で指定するときの%って何に対しての%なんですか?画面幅??
それともテーブル全体の幅ですか?
横にスクロールしてもいいので列幅を固定する方法を教えてください。
過去の質問をチェックしてみたのですが、よくわかりませんでした。

Aベストアンサー

テーブル定義の%はテーブル全体に対しての割合です。
しかし、それぞれのセルの内容物のサイズによってはブラウザが勝手に
割合を変える場合があります。
ピクセル固定でもネットスケープナビゲータ等は内容によって無視しま
す。

従って、幅を固定したいならピクセル指定で固定した上で、テーブルの
各列に固定用のスペーサーを入れる事になります。また、ネットスケー
プだけが対応している<SPACER>タグを使用することにより、ネットスケー
プのテーブル表示上の不具合を解決すると言うやり方もあります。
ただし、これらは見えないテーブルをレイアウト用に使用したときに、
使用するテクニックであって、初心者が普通の表をこれらのイレギュラー
なテクニックを使用して固定するのもどうかと思います。

※ちなみに、テーブルのセル単位でのスクロールはありません。
 スクロールが発生するのは、画面全体かフレームに対してです。

Qテーブルで列の幅を指定する

HTMLタグでWEBサイトを作成していますが、テーブルの幅を指定しても実際ページを開けると、同じ数値入れても同じ幅にならなかったり、全ての幅指定してもその通りになりません。またウィンドウを大きくしたり小さくしたりすると、特定の列のみ幅が狭くなったり広くなったりします。どうすれば幅を指定した数値どおりに固定できますでしょうか。

Aベストアンサー

 style="table-layout: fixed;" で、指定すると良いようです。↓

<html><head>
</head>
<body>
<table border=1 style="table-layout: fixed;">
<tr height="50">
<td width="160" colspan="2">あああああああああああああああああああああああああ</td>
<td width="80">いいいいいいいいいいいいいいいいいいいいいいいいい</td>
<td width="160">ううううううううううううううううううううううううう</td>
</tr>
<tr height="50">
<td width="80">かかかかかかかかかかかかかかかかかかかかかかかかか</td>
<td width="80">ききききききききききききききききききききききききき</td>
<td>くくくくくくくくくくくくくくくくくくくくくくくくくくくくくく</td>
<td>けけけけけけけけけけ</td>
</tr>
</table>
</body>
</html>

 style="table-layout: fixed;" で、指定すると良いようです。↓

<html><head>
</head>
<body>
<table border=1 style="table-layout: fixed;">
<tr height="50">
<td width="160" colspan="2">あああああああああああああああああああああああああ</td>
<td width="80">いいいいいいいいいいいいいいいいいいいいいいいいい</td>
<td width="160">ううううううううううううううううううううううううう</td>
</tr>
<tr height="50">
<td width="80">かかかかかかかかかかかかかかかかかかかかかかか...続きを読む

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文字列が入っているtdを削除せず非表示にしたい

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

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</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">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</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>...続きを読む

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ベストアンサー

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

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;"


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

人気Q&Aランキング