今だけ人気マンガ100円レンタル特集♪

HTML5で、テーブル内tdタグの高さを常に固定に

解決済

  • 質問者：re999
  • 質問日時：
  • 回答数：1件

HTML5で、テーブル内「tdタグの高さ」だけを常に固定にしたいのですが、
どうすればよいでしょうか？

文字が少ないときも、
文字が多いときも、
常に固定にしたいです。

文字が多いときは、全部表示しなくていいので、
高さを固定でいきたいです。

横幅は変動。

用途は、
スマートフォン(Android/iPhone)表示用です

通報する

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

質問の本文を隠す

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

「androidスマートフォン」に関するQ&A： 【人生で初めてAndroidスマートフォンを買いました！】 オススメのAndroidアプリを教えてく

さらに表示

「表示 iPhone」に関するQ&A： 表示がおかしい…（iPhone6s plus）

「スマートフォン iPhone」に関するQ&A： iphone スマートフォンの通信制限について

「iPhone 固定」に関するQ&A： WiMAXによるiPhoneと固定回線の節約・料金

「HTML 高さ」に関するQ&A： 画像の高さと幅はhtmlに書かないとだめ？

A 回答 (1件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

　HTMLではなく、スタイルシートの問題ですね。

その端末は、CSS2.1に対応していますから、単純にCSS2.1で指定すれば良いです。

　tableは本来、可能な限りウィンドウ幅に合わせて描画し、内容の量に応じてセルの幅を割り振ることになっています。そうしないと困るからです。
　デザインのためにtableを使うのは、HTML4.01の時代から禁忌ですから別にします。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Tables should not be used as layout aids.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.9 Tabular data — HTML5( http://www.w3.org/TR/html5/tabular-data.html#tab … )］より
　

　ブロック要素の高さは、height,min-height,max-heightで指定され、基本的に親要素の高さを参照します。
10.6.3 通常フローにある非置換ブロック要素、非置換浮動要素の場合 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

<table summary="toA">
　<tbody>
　　<tr >
　　　<td></td>
　　　<td></td>
なら、
table[summary="toA"] td{height:80px;oveflow:hihhen;}
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございました

通報する
お礼日時：2011/10/14 18:18

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

「androidスマートフォン」に関するQ&A： 【スマホ】「戻るボタン」が効かない！　対処法は！？

さらに表示

「HTML 高さ」に関するQ&A： 関西圏で大人も泳げる川を探してます。

「iPhone 固定」に関するQ&A： docomoのガラケーからスマホに乗り換えたい

「表示 iPhone」に関するQ&A： iphoneの未読メール数表示について

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

Q質問する（無料）

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

関連するQ&A

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

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

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

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

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テーブルの行の高さを指定する時全てのtdタグに？

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
１つだけ（一番左だけ）指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

１の例<br>（2列ともclass="test"を入れた）<br>

<table border=1>
<tr><td class="test">1</td><td class="test">2</td></tr>
<tr><td class="test">3</td><td class="test">4</td></tr>
</table>

<br><br>

２の例<br>（一番左の列だけclass="test"をいれた）<br>

<table border=1>
<tr><td class="test">1</td><td>2</td></tr>
<tr><td class="test">3</td><td>4</td></tr>
</table>

<br><br>

３の例<br>（スタイルシートは何も指定していない）<br>

<table border=1>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
１つだけ（一番左だけ）指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

１の例<br>（2列ともclass="test"を入れた...続きを読む

Aベストアンサー

テーブルの行の高さ、なので <tr> タグに指定するのが素直でしょうか。

<style>
table tr { height:1em; } /* 全ての行に適用 */
table tr.test { height:3em; } /* 特定の行のみ適用 */
</style>

<table border>
<tbody>
<tr> <td> 1 <td> 2
<tr> <td> 3 <td> 4
<tr class=test> <td> 5 <td> 6
</table>

他の回答も見る

Qtableのheight指定が効かない

tableの高さを固定したく、heightとoverflowを指定したんですが、
tableに記述したソース分の大きさ（高さ）になり、スクロールバーが表示されません。

/*----外部CSS----*/
.sample{
color: #ffffff;
background-color: #000000;
height: 500px;
width : 90%;
overflow:scroll；
}
/*----ソース-----*/
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" type="text/css" hrefstyle.css"></head>
<body>

<table class="sample"><tbody><tr>
<td class="a1"></td><td class="a0"></td><td class="a2"></td></tr><tr>
<td class="a0"></td><td class="a0">

<div class="text">本文（heightが700pxくらいの内容）</div>

</td><td class="a0"></td></tr><tr>
<td class="a3"></td><td class="a0"></td><td class="a4"></td>
</tr></tbody></table>
　　　　　　　　　　　　　　　　　　※tdのclassはテーブルのふちに用いてる画像を指定してあります。
</body>
</html>

解決方法をご存知の方、よろしくお願いします。

tableの高さを固定したく、heightとoverflowを指定したんですが、
tableに記述したソース分の大きさ（高さ）になり、スクロールバーが表示されません。

/*----外部CSS----*/
.sample{
color: #ffffff;
background-color: #000000;
height: 500px;
width : 90%;
overflow:scroll；
}
/*----ソース-----*/
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_J...続きを読む

Aベストアンサー

まず、
overflow:scroll； ←　コロン小文字に
----------------

テーブル関連にoverflowバグもあるので、
テーブル自体にスクロールを付けるのではなく、
その外枠を作って中のコンテンツをスクロールさせる。
外枠より中のテーブルが大きければ全体を見る為にスクロールさせる考え方。（コンテンツは、テーブルでも良いですが・・・）

<div style="height:500px; width:90%; overflow:auto;">
コンテンツ
</div>

----------------
＞※tdのclassはテーブルのふちに用いてる画像を指定してあります。
これも間違った方法で、何の為のテーブルなのでしょう・・・
テーブルは表です。画像を入れる為の表だと無意味なテーブル・・・
表以外の目的でテーブルは利用しない方が良いでしょう。

他の回答も見る

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）はこれら以外にも
いろいろな設定方法があります。

他の回答も見る

QHTMLフォームのSELECTの幅を一定にするためには？

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか？

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

他の回答も見る

Q

内のテーブルを上寄せにするには？

すみません教えていただけますか？
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか？

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
</table>
</td>

<td width="800" height="1200" border="1">

</td>
</tr>
</table>

すみません教えていただけますか？
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか？

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
...続きを読む

Aベストアンサー

TABLE Aを入れているtdに対してvalign="top"を入れると
解決しますよ。

他の回答も見る

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか？
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

２列のテーブルを作ったらいかがでしょうか？
<table>
<tr>
<td>１つめのテーブルに入れる内容</td>
<td>２つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば２つ並びます。
<table>
<tr>
<td><table>←１つめのテーブル→</table></td>
<td><table>←２つめのテーブル→</table></td>
</tr>
</table>

他の回答も見る

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

他の回答も見る

QJavaScriptde途中で、「exit」するには？

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい！"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをＯＫで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか？

Aベストアンサー

>関数（kensaku()）からは抜けられませんでした。
そうですね、勘違いしていました、ｆ（＾＾；
すみません。
if(!s_data){
alert("キーワードを入れて下さい！");
return;
}
ですね。

他の回答も見る

Qテーブルタグの中にdivを含めてはダメ？

テーブルタグの中にdiv要素を入れるとダメなのでしょうか？
何か不都合でもあるのでしょうか？
何かご存知の方がいれば教えていただけませんか？

Aベストアンサー

以下、HTML 4.01での話です。（XHTMLでもほぼ同じだと思います）

tableタグ直下に書けるのは、caption，col，colgroup，head，tfoot，tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth，tdが書けることになっています（それ以外は不可）。

th，tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth，tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

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

Q質問する（無料）

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

人気Q&Aランキング

おすすめ情報