• ベストアンサー

tableのセルの高さを調節する方法

heightを設定しないでline-height: 20%;でtableを作成すると、IE8やFireFoxなどでは正常に見えるのですが、IE7以前ではセルの高さが潰れて表示されます。　そこで、今度はheight：20pxを設定してline-heightを設定しないでtableを作成すると、IE7以前では正常に見えるのですが、IE8やFireFoxなどではセルの高さが異常に高く表示されます。　どのブラウザでも同様に表示させる方法を教えてください。　できれば、CSSで作成したいのですが。　どうぞ、宜しくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5069/13245)
回答No.2

ブラウザ毎にCSSを出し分けるのが一番です。 CSSハック とかで検索するといろいろな技が出てきますよ。

その他の回答 (1)

  • dayonee
  • ベストアンサー率20% (61/292)
回答No.1

CSSでline-height: 20%;でtableを作成しても、IE7を含む以前のバージョンでは 効果はありません。 IE８にバージョンアップすることをお勧めします。

junjunjujujun
質問者

お礼

早速のご回答、ありがとうございました。使っているブラウザは、GoogleChromeとIE8なので不自由ないのですが、通販ショップサイトを運営していて、IE7以前でテストして異常が判明して、お尋ねいたしました。

  1. カテゴリ
  2. インターネット・Webサービス
  3. ブラウザ

関連するQ&A

  • ブラウザによってテーブルのセルの高さが変わる

    質問させて頂きます。 現在、テーブルを使用して表を作っているのですが、 ブラウザによってセルの高さが変わってしまいます。 safariでは思った通りのレイアウトになるのですが、 chrome、Firefoxでは [ height ] の値が反映されていないのか、 崩れてしまいます。 添付は希望するレイアウト（safariではこのように表示されます）です。 ソースを記載しますので、どなたかご教示お願い致します。 --- html --- <table class="hogs" cellspacing="5"> <tr> <td width="180" height="184" rowspan="3"><img src="img/001.gif" width="180" height="184" alt=""/></td> <th height="22">項目１</th> <td>文章１</td> </tr> <tr> <th height="22">項目２</th><td height="22">文章２</td> </tr> <tr> <th height="140" valign="top">項目３</th><td valign="top">文章３</td> </tr> </table> --- CSS --- table.hoge { background-color: rgba(50,50,50,0.3); width: 640px; height: 184px; margin: 0 auto 18px; padding: 10px; } table.hoge th { height: 22px; background-color: #7ac0c9; width: 80px; } table.hoge td { padding: 0 20px; }

    • ベストアンサー
    • HTML
  • 文字をセル下部にぴったりくっつけたい

    お世話になります。 テーブル(の<td></td>)内に入れた文字を、セルの下部ボーダーにぴったりくっつけるように配置したいと思っているのですが、IE6でうまく文字の表示ができません。 その文字には font.●● {font-size:35px; font-weight:bolder; font-family:Verdana; color:#332600; letter-spacing:-2px; } とCSS指定し、またテーブルタグの方には <table cellspacing="0" cellpadding="0">　と <td valign="bottom">　を指定しています。 これで、Firefoxだときちんと表示されるのですが IEだと文字が潰れる、というか上下が欠けたように表示されてしまいます。 ためしに行間指定 line-height:100%; をつけくわえてみたところ、IEでの文字はきちんと表示されるようになったのですが、 テーブル下部のボーダーから浮いてしまい思ったようなレイアウトになりません。 (Firefoxも同様に浮いてしまいます) 文字を欠けなく表示し、また下部ボーダーにぴったりくっつけるやり方がありましたら教えてください。 よろしくお願いいたします。

  • ボックスの高さがある程度以上縮まりません！

    ボックス（div）を使って幅950px、高さ5pxの線を描こうとしています。 htmlに <div id="box_line"></div> cssに #box_line{ height:5px; width:950px; background-color:#3B5998; } と指定しています。 firefox3で確認するとうまく表示されるのですが、IE6で確認すると高さが10pxくらいになってしまいます。(幅は正常に表示されます) 試しに、height:30px;と指定すると、firefoxでもIEでもしっかりと表示されるのです。 IE6にはボックスの最低高さ制限でもあるのでしょうか？ また、他の方法で同じ線を表現する方法があればお教え下さい。 ちなみにDOCTYPEはstrictに指定しています。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • IE8でtableのレイアウトが崩れる

    Wordpress3のTwenty Tenテーマを使用して、投稿ページを作成しています。 複数列、行のテーブルを表示させていため、カスタマイズしているのですが、 どうしてもIE8のみレイアウトが崩れます。 IE7,9は正しく表示されています。 よろしくお願いします。 ■不具合点 ・テーブル内の文字を上部にしたいが、下部に表示されてしまう。 　 ■css table#testtable { border: 1px solid #e7e7e7; text-align: left; background: #f2f7fc; margin: 0px; padding: 0px; background: #FFFFFF; line-height: 20px; font-size: 12px; height: 100px; width:700px; word-break:break-all; } th#testphoto { text-align: left; margin: 0px; padding: 0px; line-height: 30px; font-weight: bold; font-size: 12px; height: 30px; width:110px; word-break:break-all; } ・ ・ ・ ・ td#testphoto { text-align: left; margin: 0px; padding: 0px; line-height: 30px; font-size: 12px; height: 90px; width:110px; word-break:break-all; } ・ ・ ・ ・

    • ベストアンサー
    • CSS
  • TABLEセル内で改行させたいのですが・・・

    いつもお世話になっております。 ＨＴＭＬ上で、名前とメールアドレスの一覧を作成しました。 すると、テーブルの列幅を指定しているにもかかわらずメールアドレスが、 改行されずに１行で表示されてしまいます。 検索した結果、「word-break : break-all」をＣＳＳで設定したら大丈夫で あることがわかったので、設定しました。 ＩＥでは、問題なく表示されたのですが、FireFoxでは、改行されません。 ＦｉｒｅＦｏｘでも、改行されるようにしたいのですが、どこを修正したら 宜しいでしょうか。　 ご教授いただけますよう、どうぞ宜しく御願いいたします。 ＜Ｓｏｒｃｅ＞ <html> <head> <style type=text/css> p{ maegin:0px; word-break: break-all; } </style> </head> <body> <table border="1px"> <tr> <td width="100px">Name:</td> <td width="100px">takemoto</td> </tr> <tr> <td width="70px">E-Mail:</td> <td width="70px"><p>ytakemoto12345678@abc.ne.jp</p></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • ＣＳＳでテーブルを作る方法について

    CSSでテーブルを作る方法についてアドバイスお願いします。 今、外CSSで、テーブルを作成しようとしているのですが、cssがhtmlに反映されていないようです。２つボックスを並べたいです。 .box1{ float: left; background-color: #cc0000; width: 200px; height: 200px; } .box2{ float: left; background-color: #d0dcdf; width: 200px; height: 200px; } htmlには、 <div CLASS="box1"></div> <div CLASS="box2"></div> と書きました。 どこが問題なのかどなたかご指摘いただけますでしょうか？

  • CSS 上下に余白なくtableを広げたい

    今回、WEBサイトをCSSで作成しているのですが、IEだと予定通りに表示できFire Foxだと表示できないというところで躓いてしまいました。 width: 900px; margin: 0px; height: 100%; min-height: 100%; background-color: #000000; このCSSをtableタグで呼び出しているのですが、Fire Foxだと一番下に空白ができてしまいます。 この空白を取っ払いたいのですが、どのようにすればいいのでしょうか。 ご存じの方がいらっしゃいましたら、ご教示ください。よろしくおねがいします。 Fire Fox Ver.10.0.2

    • ベストアンサー
    • HTML
  • CSSを使ってテーブルでセル全体をリンクしたい

    CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 ４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？ 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます ＜ｃｓｓの方＞ table#table-01 { width: 600px; border: 0px #E3E3E3 solid; border-collapse: separate; border-spacing: 20px 0; } table#table-01 th { width: 130px; height: 70px; padding: 5px; border: #E3E3E3 solid; border-width: 1px 0 0 1px; background: #F5F5F5; font-weight: bold; line-height: 120%; text-align: center; } table#table-01 td { vertical-align: top; padding: 1px 3px 20px 0; border: 0px #E3E3E3 solid; border-width: 0; text-align: center; } ＜ｈｔｍｌの方＞ <table id="table-01" cellspacing="20px"> <tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr> <tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr> よろしくお願いします

    • ベストアンサー
    • HTML
  • HTML、CSSについて。テーブル背景がズレる。

    こんにちは。よろしくお願いします。 HTMLとCSS、2つのファイルを作成しています。 HTMLでテーブルを作成し、<td><div=名前></div></td> として、テーブルの中身はCSSにまかせています。 複数列、複数行ありますがdiv名はひとつずつ違うのが付いています。 CSSでは、 div#名前 { width: 20px; height: 20px; margin: 0px; padding: 0px; background: url(画像名.gif); } 　　・ 　　・ 　　・ htmlを表示させてはcssのpxを調節し、 きれいな背景画像付きのテーブルが完成した！と思ったのですが、 ブラウザの文字サイズを最大に変更すると崩れてしまいました。 pxではなくて%で指定してみても崩れます。 解決策をご存知の方、教えてくださると有難いです。 よろしくお願いします。

  • セルを結合してもCSSで設定した一つ分の幅で表示されます

    tableタグを使用して表を作成しており、幅や罫線などの装飾はすべてCSSを使用しています。 質問は、WindowsのIEのみで発生する事象についてです。 colspanで結合しているthタグやtdタグがいくつかあるのですが、それらがCSSのwidthで設定した幅の一つ分で表示されてしまうのです。 FirefoxやSafari、Mac版IEでは発生しません。結合したセルの幅で表示されます（例：widthで100pxを設定し、colspan="3"なら、300pxで表示）。 これはWindows IEのバグでしょうか？ ネット上でかなり探してみましたが、情報は得られませんでした。 解決策・回避策をご存じの方、ご教示ください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する