<table>の高さ固定。情報増加時、高さ自動変化
- <table>の高さを固定する方法と、情報が増えた際に高さを自動的に変化させる方法が知りたいです。
- 現在、<table>内の行数が少ない場合は高さを150pxに固定していますが、行数が増えた場合は高さを自動的に変化させたいです。
- サンプルのコードを作成しましたが、アドバイスをいただきたいです。
- ベストアンサー
<table>の高さ固定。情報増加時、高さ自動変化
<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>
- tekkenman7
- お礼率70% (150/212)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんばんは。 TABLEのheight:150px;をやめる。 TDにstyle="min-height:150px;"
その他の回答 (2)
- naokita
- ベストアンサー率57% (1008/1745)
height:150px; ではなく、 min-height:150px; IE6も考慮するなら、 * html table{ height: auto !important; height: 150px;}
お礼
ありがとうございました。
- marutone
- ベストアンサー率40% (70/174)
このソースに以下のソースを加えてみてください。 <style type="text/css"> ul{ margin-top:0px; margin-bottom:0px; } </style>
お礼
ありがとうございました。
関連するQ&A
- firefoxのみテーブルのborderが消える
firefoxのみテーブルの上下のborderの一部が消えてしまいます。 ウィンドウのサイズを変えると消える位置が変わります。 消えないための方法はありますか？ 【CSS】 table.aaa{ width:750px; border-top:1px solid #333; border-bottom:1px solid #333; border-collapse:separate; border-spacing:0; text-align:center; margin-top:30px; } td.bbb, td.ccc{ padding:30px 30px; } td.ccc{ width:100px; background:#000; color:#fff; } ul{ width:750px; margin-left: -23px; overflow:hidden; } ul li { display: inline; width: 200px; margin-left: 30px; float: left; } ul li img { display: block; border: 1px solid #555; } 【HTML】 <table class="aaa"> <tr> <td class="ccc">テスト１</td> <td class="bbb">※※※※※※※※※※</td> </tr> </table> <ul> <li><a href="xxx.html#w1"><img src="sample.jpg" width="200" height="150" ></li> <li><a href="xxx.html#w2"><img src="sample.jpg" width="200" height="150" ></li> <li><a href="xxx.html#w3"><img src="sample.jpg" width="200" height="150" ></li> </ul> <ul> <li><a href="xxx.html#w4"><img src="sample.jpg" width="200" height="150" ></li> </ul> <table～…～</ul>まで10個ほど繰り返す。
- ベストアンサー
- HTML
- ウィンドウ全体をテーブルで表示するには？
できればウィンドウ全体をテーブルにする方法を教えて欲しいです。 左右上下に余白がなく、ウィンドウの大きさと同じ大きさでテーブルが表示される様にしたいのですが、下記のタグをどうさわっても余白ができてしまいます…。 何処が間違いなのか教えて頂けると有り難いです。 下手ですがイメージもかいてみたので見てみて下さい。 分かり辛い説明で申し訳ありませんが、よろしくお願いします。 【HTML】 <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td>たいとる</td></tr> <tr><td class="menu_td"><ul class="menu">めにゅー</ul></td></tr></table> 【CSS】 body{ background-image:url(＊＊＊); background-repeat: repeat; } .menu_td{ padding-left:20px; height:20px; background-color:#fff; border-top:1px solid #ccc; border-bottom:1px solid #ccc; filter:alpha(opacity=75); -moz-opacity:0.75; } .menu{ margin:0px; padding:0px; list-style-type:none; } .menu li{ width:100px; height:20px; line-height:20px; float:left; } .menu li a{ padding-left:15px; height:20px; line-height:20px; background-image:url(＊＊＊); background-position:0% 50%; background-repeat:no-repeat; display:block; } .menu li a:hover{ background-color:#efefef; } table{ border-collapse: collapse; border: 0px #999999 solid; color: #999999; font-size: 9pt; font-family: Verdana,Osaka,'MS UI Gothic'; } ul{ margin:0px; padding:0px 0px 0px 15px; list-style-type:circle; } よろしくお願いします。
- 締切済み
- CSS
- floatすると親要素より横にずれてしまいます
#contentsにある2つのボックスが左へ20pxほどずれてしまいます。 いろいろと調べてみたのですが解決できませんでした。 長文になってしまい申し訳ありませんが、ご指導よろしくお願いします。 <<CSS>> body { font-size:10px; margin: auto; padding: 0; text-align:center; min-width: 810px; max-width: 850px; height: 100%; } #wrapper { width: 830px; height:100%; margin-left:auto; margin-right:auto; padding-top: 10px; padding: 0; background-color: #FFF; } #header { width: 830px; height: 150px; margin: 0; padding-bottom: 0; min-height: 1%; overflow: hidden; line-height: 0px; background: url(back_top.gif) #F9F9F7 center top no-repeat; } img { display:block; } #logo { float: left; width: 450px; height: 78px; padding-top: 50px; padding-bottom: 0; margin-left: 40px; background: transparent; } #logo h1 { width: 450px; height: 78px; font-size:12px; margin: 0; padding-bottom: 0; background: transparent; } #navi { float: right; width: 310px; height: 50px; padding-top: 60px; margin-right: 30px; line-height: 0px; } #contents { width: 830px; min-height: 600px; margin: 0; background: url(back_main.gif) #F9F9F7 center repeat-y; } #contents #sub { float: left; width: 180px; height: auto; text-align: center; } ul { margin: 0; padding: 0; float: left; width: 180px; list-style: none; color: #794c2c; background-color: #EDE4EB; } li { display: block; margin: 0; padding: 0; font-size: small; } li span { display: block; font-size: x-small; } li#c01 a { background: url(c01.jpg) 7px 5px no-repeat; } li#c02 a { background: url(c02.jpg) 7px 5px no-repeat; } li a { display: block; min-height: 40px; padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; text-decoration: none; color: #aa8f78; background-color: #F3EEDE; } ul li a:hover { color: #794c2c; background-color: #F3FAD1; } /* Hides from IE-mac \*/ * html ul li a, * html ul li { height: 40px; line-height: 1.5; } /* End hide from IE-mac */ /* line-heightはli間の隙間をなくするために指定 */ #contents #main { float: right; margin-right: 50px; width: 500px; height: auto; background-color: transparent; } #footer { width: 830px; height: 100px; background: url(back_bottom.gif) #F9F9F7 center no-repeat; margin: 0; } <<html>> <body> <div id="wrapper"> <div id="header"> <div id="logo"><h1><a href="/"><img src="../../Documents/logo.png" width="450" height="78" border="0" alt="HOMEPAGE" /></a></h1></div> <div id="navi"><p>SAMPLE</p> <div id="srchBox">**yahoo検索窓** </div></div> <div style="clear:both;"></div> <div id="contents"><div id="sub"><ul><li> </li><li id="c01"><a href="c01.htm">c01<span>c01</span></a></li><li> </li><li id="c02"><a href="c02.htm">c02<span>c02</span></a></li</ul></div> <div id="main"><img src="../../Documents/001.jpg" width="400" height="354" border="0" /></div></div> <div id="footer"><table border="0" width="750" height="100" align="center"><tr><td width="250" height="70" align="center" valign="top">AAA</td><td width="250" height="70" align="center" valign="top">BBB</td><td width="250" height="70" align="center" valign="top">CCC</td></tr><tr><td colspan="3" width="750" height="30"> </td></tr></table></div> </div> </div> </body>
- 締切済み
- HTML
- 文字を中央表示にしたいのですが
文字を中央表示にしたいのですが、真ん中より右側にずれてしまいます。 タグのどこが悪いのかわかりませんので、教えていただけませんでしょうか。 ＜HTMLタグ＞--------------------------------- <table cellpadding="0" cellspacing="0" id="image"><tr><td valign="bottom"> <ul> <li><a href="home.html">ホーム</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="info.html">お問い合わせ</a></li> </ul> </td></tr></table> -------------------------------------------------- ＜cssタグ＞-------------------------------------- #image{ border:none; background:url('img/bannar.bmp') no-repeat left top; margin-left: auto; margin-right: auto; width:600px; height:258px; text-align: center; } #image td{ margin:auto; } #image ul{ list-style-type:none; } #image li{ width:150px; margin:10px; padding:0; background-color:#fff; font-size: 14px; text-align:center; text-decoration:underline; } ----------------------------------------
- ベストアンサー
- HTML
- スタイルシートでのデザイン
HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- CSS
- CSS セルごとリンクにする際、リンク文字を上下中央寄せにしたい
セルごとリンクにしたくて、以下の記述をしました。 【CSS】 ------------------------------------------------------------------ a.widelink{ vertical-align:middle; display:block; // display:inline-block; width: 100%; height:100%; // line-height:100%; color: #000000; text-decoration:none } a.widelink:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; text-decoration:none } td.bgchng{ align: center; vertical-align: middle; color: #000000; margin: 0px; padding: 0px; } td.bgchng:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; margin: 0px; padding: 0px; } ------------------------------------------------------------------ 【HTML】 ------------------------------------------------------------------ <TABLE border="1" bordercolor="#6666CC" cellspacing="0"> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test01.html" CLASS="widelink"> テスト<BR>（その１） </A> </TD> <TD width="450" bgcolor=""> テスト（その１）の説明文<BR> 二行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test02.html" CLASS="widelink"> テスト（その２） </A> </TD> <TD width="450" bgcolor=""> テスト（その２）の説明文<BR> 二行目<BR> 三行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test03.html" CLASS="widelink"> テスト（その３） </A> </TD> <TD width="450" bgcolor=""> テスト（その３）の説明文<BR> 二行目 </TD> </TR> </TABLE> ------------------------------------------------------------------ この記述だとリンク文字がセルのTOPに来てしまい、中央寄せになりません。 思いつく限りの場所にvertical-alignやvalignを仕込んでみましたがダメでした。 line-heightであわせる方法もやってみましたが、<BR>を含むリンク文字の表示が二行揃ってくれず、ダメでした。 セル自体をリンクにして、さらにリンク文字を上下中央寄せにしたいのですが、やり方をご存知の方、教えてください。
- 締切済み
- HTML
- リストタグの上に変なスペースが・・・
下記の１～４のリストを上下の画像(a.jpg/b.jpg)で囲んでいます。 なぜかa.jpgの下だけに10pxくらいのスペースが開いてしまいます。 解消方法を教えていただけないでしょうか？ 【html】 <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="../images/a.jpg" border="0"></td> </tr> <tr> <td background="../images/bg.jpg"><h3> <ul id="pointlist"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </h3></td> </tr> <tr> <td><img src="../images/b.jpg"></td> </tr> </table> 【css】 #pointlist { padding-left: 30px; padding-right: 15px; margin: 0px; list-style-type:square; list-style-position:inside; } #pointlist li{ width: auto; float: left; margin-top: 0px; padding-right: 20px; font-size: 0.9em; line-height: 1em; text-align: left; white-space: nowrap; }
- 締切済み
- HTML
- ページを拡大縮小でborderが消える場合の対処法
Firefoxで開いたページctrl＋マウスのクルクルで拡大縮小すると tableの上下に設定したborderが部分的に消えてしまいます。 下記コードは自分のページに使われているのを似せて作りました。 消える具合を再現しようとしたのですが消えませんでした。 一部しか似せてないからでしょうか。 ページトップにあるボタン複数は、 マウスオーバーで画像が切り替わるのをCSSで作ってありますが、 それは関係ないですよね。 IE9、IE8、chromeは消えませんが、Firefoxでは消えてしまいます。 こういったバグは一体何が原因で起こるのでしょうか？ 何か改善方法はありませんか？ 最も私が求めているアドバイスは、 例えば、 『floatで指定した値と同じ方向にmarginの指定をすると、 指定値の倍程度になってしまうバグを解消するには、 floatとmargin が同じ方向のプロパティを持つ要素に display:inline;を付け加える』 これが理想ですが、でもヒントだけでも頂けると助かります。 宜しくお願い致します。 <html> <head> <title>テスト</title> <script language="JavaScript" type="text/javascript"> <!-- function openwin(url, winname, width, height) { if(!width) { width = 600; } if(!height) { height= 400; } if(!winname) { winname = 'win'; } w = window.open(url, winname,'width=' +width+ ',height=' +height+ ',status=no,scrollbars=yes,directories=no,menubar=no,resizable=yes,toolbar=no'); } //--> </script> <style type="text/css"> table.aaa{ width:750px; border-top:1px solid #333; border-bottom:1px solid #333; border-collapse:separate; border-spacing:0; text-align:center; margin-top:30px; } td.bbb, td.ccc{ padding:30px 30px; } td.ccc{ width:100px; background:#000; color:#fff; } ul{ width:750px; margin-left: -23px; overflow:hidden; } ul li { display: inline; width: 200px; margin-left: 30px; float: left; } ul li img { display: block; border: 1px solid #555; } </style> </head> <body> <form method="post"><input type=button onClick="openwin('xxx.html');" value="テスト"> </form> <span class="eee"><a name="t1" id="t1">NO1</a></span> <table class="aaa"> <tr> <td class="ccc">テスト１</td> <td class="bbb">※※※※※※※※※※</td> </tr> </table> <ul> <li><a href="xxx.html#w1"><img src="sample.jpg" width="200" height="150" ></li> <li><a href="xxx.html#w2"><img src="sample.jpg" width="200" height="150" ></li> <li><a href="xxx.html#w3"><img src="sample.jpg" width="200" height="150" ></li> </ul> <ul> <li><a href="xxx.html#w4"><img src="sample.jpg" width="200" height="150" ></li> </ul> <table～…～</ul>まで10個ほど繰り返しされます。<li>の数は一項目最大9個ほど
- 締切済み
- HTML
- 困っています。教えてください!
ブラウザ表示すると、変な場所にリンクがつきます。 置き換えた画像にリンクがつきません。 ナビゲーションを画像にして横に並べたいです。 以下にコードあります。 どこが間違っていますか？ 教えてください。 お願いいたします! -----HTML----- <div id="navi"> <ul> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="price">Price</a></li> <li><a href="#" id="catalog">Catalog</a></li> <li><a href="#" id="access">Access</a></li> <li><a href="#" id="reserve">Reserve</a></li> </ul> </div> -----CSS----- #navi { width:950px; height:48px; } #navi ul { list-style:none; margin:0px; padding:0px; } #navi li { text-indent:-9999px; float:left; width:135px; margin:0px; padding:0px; } #navi li a { display:inline; } #navi ul li a#home { display:block; width:148px; height:48px; margin-left:100px; margin-top:30px; background:url(images/home.gif) no-repeat; } #navi ul li a#price { display:block; width:135px; height:48px; margin-left:116px; margin-top:30px; background:url(images/price.gif) no-repeat; } #navi ul li a#catalog { display:block; width:154px; height:48px; margin-left:120px; margin-top:30px; background:url(images/catalog.gif) no-repeat; } #navi ul li a#access { display:block; width:135px; height:48px; margin-left:140px; margin-top:30px; background:url(images/access.gif) no-repeat; } #navi ul li a#reserve { display:block; width:155px; height:48px; margin-left:150px; margin-top:30px; background:url(images/reserve.gif) no-repeat; }
- ベストアンサー
- CSS
- リスト内での画像の下部揃え
下記のように、上部テキスト下部画像の組み合わせで、横並びでリストを作りました。 テキストの量に合わせて、画像が上下するので、見栄えが悪いです。それをテキストは そのままの位置で、画像は下部でそろえたいと思います。それが不可能な場合 せめてすべて下部で合わせたいです。 display: inline-block; vertical-align: bottom; を記入しましたが、全く効果ありません。 どうすればよろしいのでしょうか？ HTML <body id="news" class="s"> <div > <ul class="u1" > <li><span class="time">テキスト</span> <div class="news_img"> <img src="hoge.jpg"> </li> </ul> </div> </body> CSS #news.s ul { padding: 10px; width: 100%; } #news.s li { float: left; width: 170px; height: 240px; padding:0 10px 8px 0; font-size: 12px; list-style: none; display:block; vertical-align: bottom; } #news.s li img { display: inline-block; vertical-align: bottom; border: solid 1px silver; width: 140px; height: 140px; max-width: 140px; max-height: 140px; } .news_img { display: table-cell; height: 160px; text-align: center; width: 160px; margin-top: 10px; } div.news_img div { /* IE 7 */ display: inline; zoom: 1; }
- ベストアンサー
- CSS
お礼
ありがとうございました。