- ベストアンサー
width="100%" で指定した場合のブラウザでちじめられた時の対処
タイトルが意味不明になってしまってすいません。 <table width="100%"><tr><td> HTMLコード </tr></td></table> とするとブラウザにいっぱいに表示されます。しかしこの場合、ブラウザの大きさを小さくすると自動的に文字が動きブラウザの大きさ内に収まろうとしレイアウトが崩れてしまいます。 ブラウザのサイズが小さくなったときにレイアウトを崩さず、尚且つ100%で指定するにはどうすればいいのでしょうか？ よろしくお願いします。
- itmedia_search
- お礼率61% (65/105)
- HTML
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
width指定の値を%指定ではなく、ピクセル指定にすれば良いです。 <table width="500"><tr> とか。 この場合、500ピクセル分のサイズでtableが表示されますが、ブラウザの横幅が500ピクセル以下となった場合、横スクロールされるようになります。
その他の回答 (1)
- Jodie0625
- ベストアンサー率30% (397/1288)
表全体を、width=100%に指定したままで、崩れるとどうしても具合の悪い列だけを固定幅で指定することで回避できるでしょう。 <table width="100%">はそのままで、 <TD width="180"> などとします。 横幅を小さいpixel数の固定幅の表にすると、横スクロールが必要な表示になったときどうしても見づらくなり、見やすさが失われますので、とくに目的がない限りおすすめしません。 どうしても、幅数百ピクセルで見る人はいるでしょうから、そのときは崩れたり、横スクロールバーが出たりするのはしょうがないですね。
お礼
回答ありがとうございました。
関連するQ&A
- width指定したTDでwhite-space:nowrapが効かない
width指定したTDでwhite-space:nowrapが効かない ブラウザはIE6～8のみを想定しています。 下記のHTMLでは、2行目は正常なのですが、1行目のnowrapが働かず、改行がかかってしまいます。 列毎に幅を指定する必要があるので、1行目にはwidthを指定しているのですが、 どのようにすれば自動改行を禁止できるでしょうか。 <table style="table-layout: fixed;"> <tr> <td style="width: 50px; overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="width: 70px; overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> <tr> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> </table>
- ベストアンサー
- HTML
- tableの中にtableを作ると、width指定が機能しない
tableの中にtableを作り、中側にあるテーブルの列ごとにwidthを指定したいのですが、うまくいきません。ソースを書いてみます。 例： <table width=300> <tr><td> <table width=100> <tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><tr> </table> </td><td> <table width=100> <tr><td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td><tr> </table> </td><td> <table width=100> <tr><td>ccccccccccccccccccccccccccccccccccc</td><tr> </table> </td></tr> </table> width=300のテーブルの中にwidth=100のテーブルが3つできたのはいいのですが、width=100のテーブルの中に100pxを超える文字列を入れると100pxという値を無視してテーブルが横長くなってしまいます。 これを100pxという値に従わせるにはどうしたらいいでしょうか？
- ベストアンサー
- HTML
- widthの％ or ピクセルを指定した場合の違いについて
お世話になっております。 下記のソースは、２つのテーブルをくっつけたソースなのですが、 (1)はwidthに「％」を指定しており、(2)は「ピクセル」を指定しています。 (1)の％だとちょうど合っていますが、(2)のピクセルを指定した場合では、値を合わせているにも関わらずずれてしまっています。 「ピクセル」指定をした場合でも合わせるにはどうすればよいのでしょうか？ (1)widthに「％」を指定 </head> <body> <div style="width:330;height:20;overflow:hidden"> <table cellpadding="0" width="300" border="1" align="left"> <tr> <td width="20%">列1</td> <td width="20%">列2</td> <td width="20%">列3</td> <td width="20%">列4</td> <td width="20%">列5</td> </table> </div> <div style="width:330;height:50;overflow:auto"> <table cellpadding="0" width="300" border="1" align="left"> <tr> <td width="20%">ああああああああああああああああああああああ</td> <td width="20%">2</td> <td width="20%">3</td> <td width="20%">4</td> <td width="20%">5</td> </tr><tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr><tr> <td>7</td> <td>8</td> <td>いいいいいいいいいいいいいいいいいいいいいい</td> <td>10</td> <td>11</td> </tr> </table> </div> (2)widthに「ピクセル」を指定 </head> <body> <div style="width:330;height:20;overflow:hidden"> <table cellpadding="0" width="300" border="1" align="left"> <tr> <td width="60">列1</td> <td width="60">列2</td> <td width="60">列3</td> <td width="60">列4</td> <td width="60">列5</td> </table> </div> <div style="width:330;height:50;overflow:auto"> <table cellpadding="0" width="300" border="1" align="left"> <tr> <td width="60">ああああああああああああああああああああああ</td> <td width="60">2</td> <td width="60">3</td> <td width="60">4</td> <td width="60">5</td> </tr><tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr><tr> <td>7</td> <td>8</td> <td>いいいいいいいいいいいいいいいいいいいいいい</td> <td>10</td> <td>11</td> </tr> </table> </div>
- ベストアンサー
- HTML
- TABLE内でのwidth指定
<table> <tr><th colspan="3">●</th></tr> <tr><td class="1">■</td> <td class="2">▲</td> <td class="3">★</td></tr> <tr><th colspan="3">○</th></tr> <tr><td class="1">□</td> <td class="2">△</td> <td class="3">☆</td></tr> </table> このサンプルについて考えています。 ●○が、割と長い文字列になります。 この時、例えば2段目の左の列が、■,□のうち長い方の文字列に合わせて「width」が表示されるためには、スタイル「class="1"」の内容をどう記述すれば良いのでしょうか。 デフォルトの「width:auto」では、●○の長さに引っ張られてしまい、余分なスペースが出来てしまいます。 2段目の中の列（▲△部分）が短文を記述するセルなので、●○に合わせる必要のあるスペースは、全てここで吸収してしまいたいのです。 同じ仕組みで幾つかテーブルを組みますので、【class="1"】のwidthにpx,%等といった値自体を指定するのは向いていません。 ご指導おねがいします。
- ベストアンサー
- HTML
- 半角だけだとtableタグのwidth指定が無効になってしまう。
半角だけだとtableタグのwidth指定が無効になってしまいます。半角を入力した際にwidth指定を有効にする方法をご教授お願いします。 <TABLE border="1" width="110"> <TBODY> <TR width="110"> <TD width="110">０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９</TD> </TR> </TBODY> </TABLE> <BR> <TABLE border="1" width="110"> <TBODY> <TR width="110"> <TD width="110">0123456789012345678901234567890123456789012345678901234567890</TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- HTML
- テーブルwidthで指定したのに幅が広がる
↓のようなHTMLをCGIで出力しました。 <TABLE width="500" cellpadding="10" bgcolor="wheat"> <TR> <TD>2006年9月6日（水）20時48分 </TD><TD><B>2/12求人広告結果</B></TD><TD> 広告</TD> </TR><TR><TD colspan="3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </TD></TR> <TR><TD colspan="3"><A HREF="./outsider01.cgi?mycmd=edit&view_page=328"><P align="right">編集</A>｜<A HREF="./outsider01.cgi?mycmd=delete&view_page=328">削除</A></P></TD></TR> </TABLE> すると、テーブルの幅が広がるのです。 aaaaaaaaaaaaaaaaaaaa・・・ ではなく、ふつうの全角の文章ですとwidth500で固定されるようです。 なぜ小文字のaaaaaaaaaaaaaだとwidthが固定されないのでしょうか？
- ベストアンサー
- HTML
- FireFoxでテーブルのbackgroundが表示されない
テーブルレイアウトで、IEでは正しく表示されているbackgroundカラーがFireFoxでは表示されません。 文字が見えなくなってしまい大変困っています。 CSS初挑戦だったので、そもそもコードが正しくないのかも知れません。調べたのですが解決策がわかりません。 どなたかご存知の方いらっしゃいましたらよろしくお願いいたします。 下記コードです。 /*CSS*/ TABLE.SAMPLE { table-layout: fixed; width: 500px; background:"#FFFFCC"; } td.td_hd { background:"#000066"; color:Silver; font-size: 12pt; } /*HTML*/ <table class=SAMPLE> <tr> <td class=td_hd>ヘッダタイトル</td> </tr> <tr> <td>あああああああああああああああああああああああああああああ</td> </tr> </table>
- ベストアンサー
- HTML
- ブラウザによる「width」の違い
<html> <body style="background-color:#FFFFFF;color:#000000;font-weight:nomal;margin:0%;"> <div style="border:solid 2px #000000;margin:10% 0% 10%;"> <div style="margin:5% 10% 8%;"> <table border="1" style="width:100%;"> <tr><td bgcolor="#3399FF">A1セル</td></tr> </table> </div> </body> </html> 上のソースは抜粋です。 上のソースをIEで開くと、一画面から横にあふれてスクロールする様な表示になってしまいます。 しかし、全く同じソースをOperaで開くと、 (Operaが入っていないと思うので)<table>のwidthを100%から700pxくらい(人によって解像度で変わってきますが)にしてIEで表示したときのように、画面からあふれることはく、ちょうど真ん中にきれいに表が収まります。 ブラウザによって、widthの基準となる幅がブロックだったりウィンドウサイズだったりしているんだと思うのですが、どうすれば両方のブラウザで同じ表示をさせることができるのでしょうか… 絶対数値で固定してしまえば早いのですが、できれば相対数値で幅を整えたいので…
- ベストアンサー
- HTML
- ホームページのテーブルをWordに貼り付けると左にづれる？
以下のコードのHTMLで作られたテーブルをブラウザーに表示→コピー→Wordに貼り付けると、テーブルがWordの文字列開始位置よりも左側にづれてペーストされるのですが、どのようにして回避できるのでしょうか？ コード： <table width="550" border="1" cellspacing="0" cellpadding="40"> <tr> <td width="466" colspan="2" align="center"> 表タイトル </td> </tr> <tr align="left" valign="top"> <td width="118"> 表見出し行 </td> <td width="266"> データ </td> </tr> </table> どうやら、テーブルのcellpaddingが関係しているようで、cellpaddingの値を以下のコードのように小さくすると、テーブルをWordに貼り付けたときに文字列開始位置よりも左にずれる割合は小さくなります。 コード： <table width="550" border="1" cellspacing="0" cellpadding="5"> <tr> <td width="536" colspan="2" align="center"> 表タイトル </td> </tr> <tr align="left" valign="top"> <td width="188"> 表見出し行 </td> <td width="336"> データ </td> </tr> </table> ただ、それでも少し左にずれることには変わりませんし、cellpaddingの値が大きなテーブルをWordに貼り付けるときの回避策とはなりません。 どのようにしたら、cellpaddingの値が０ではないホームページのテーブルをブラウザーからコピーしWordに貼り付けたとき、Wordの文字列開始位置より左にずれないようにできるのでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- HTMLの表で幅を指定しても折り返すことは無理なのでしょうか？
以下のHTMLの表は横幅を指定していますが、 すごく横長な表になってしまいます。セルの幅を指定してもセル内の文字を折り返す事は不可能なのでしょうか？ <html> <head> <title>table</title> </head> <body> <table width="570" border="1"> <tr><td width="130"> test1</td> <td bgcolor="#CCCCCC" width="440"> oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo </td></tr></table> </body> </html>
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 はじめからピクセル指定してしまうとブラウザいっぱいに表示できないのでNGです。ん～やはり無理なのでしょうか。 ありがとうございました。