widthの％ or ピクセルを指定した場合の違いについて
- widthの％とピクセルを指定した場合の違いについて質問です。
- ソースコードの例を見ると、％指定では正常に表示されるが、ピクセル指定ではずれる現象が起きています。
- ピクセル指定でも正確に表示させるためにはどうすればいいのでしょうか？
- ベストアンサー
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>
- kamakuragengorou
- お礼率53% (132/248)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは (1)widthに「％」を指定 <div style="width:330px;height:20px;overflow:hidden;"> <table cellpadding="0" border="1" style="width:300px;text-align:left;"> <tr> <td style="width:20%;">列1</td> <td style="width:20%;">列2</td> <td style="width:20%;">列3</td> <td style="width:20%;">列4</td> <td style="width:20%;">列5</td> </tr> </table> </div> <div style="width:330px;height:50px;overflow:auto"> <table cellpadding="0" border="1" style="width:300px;text-align:left;"> <tr> <td style="width:20%;">ああああああああああああああああああああああ</td> <td style="width:20%;">2</td> <td style="width:20%;">3</td> <td style="width:20%;">4</td> <td style="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に「ピクセル」を指定 <div style="width:330px;height:20px;overflow:hidden;"> <table cellpadding="0" border="1" style="width:300px;text-align:left;"> <tr> <td style="width:55px">列1</td> <td style="width:55px">列2</td> <td style="width:55px">列3</td> <td style="width:55px">列4</td> <td style="width:55px">列5</td> </tr> </table> </div> <div style="width:330px;height:50px;overflow:auto"> <table cellpadding="0" border="1" style="width:300px;text-align:left;"> <tr> <td style="width:55px">ああああああああああああああああああああああ</td> <td style="width:55px">2</td> <td style="width:55px">3</td> <td style="width:55px">4</td> <td style="width:55px">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> 列名のテーブル</tr>抜け styleを使用するときは**pxとした方がいいと思います table width:300px = td width:60px*5(300px) と考えがちですが実際にはボーダー分のpx数table内の幅が減りますのでtdのpx数を少し減らす必要があります（border="1"のボーダー1つで約4px) <td width="55"><td style="width:55px;">おそらくどちらでもいいと思いますがwidth="55"は非推奨属性なのでstyleの方がいいかな？(<table>の方は非推奨ではありません) あれでしたら<table>にstyle="table-layout:fixed;"を追加してもいいですし・・・ ただ55pxを超える半角英数字の連続を使用した場合、レイアウトは崩れます（＞＜）(table-layout:fixed;未指定) 指定の場合はIEは超えた分は見えなくなり他のでは隣のセルにはみ出ます（tdにoverflow指定する必要有り？) （word-breakなどの手もありますがIE専用になります) http://www.htmq.com/style/word-break.shtml
関連するQ&A
- テキストボックスの表示
テキストボックスの表示 テキストボックスを２つ横に並べて表示したいのですが、 <html> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="308" height="300" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストＡ </Td></Tr> </Table></div> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="200" height="200" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストＢ </Td></Tr> </Table></div> </html> これで、記述をすると縦に二つ表示されます。 スタイルシートを使用しないと無理でしょうか？
- ベストアンサー
- HTML
- HTMLのどこを削除すれば罫線が消えますか？
添付画像の【ドリッパー＆リッド付きルシード・ドリップ・イン・マグ】の文字の下の罫線を削除したいのですが、HTMLのどこを削除すれば罫線が消えますか？ 教えて下さい。 <table width="700" cellspacing="0" cellpadding="5" style="font-size:10pt;"><tr> <td width="47" align="left" style="border-bottom:#666666 1px solid;"> <div align="left"></div></td> <td width="6" align="left" style="border-bottom:#666666 1px solid;"></div></td> <td width="601" style="border-bottom:#666666 1px solid;"><div align="left"><b>ドリッパー＆リッド付きルシード・ドリップ・イン・マグ</b></div></td> </tr> </table> <table width="700" border="0" cellspacing="0" cellpadding="10"> <tr> <td align="center"><img src="http://image.co.jp/deco/cabinet/item/04751544/imgrc0065803424.jpg" ></td> </tr> </table>
- ベストアンサー
- デザイナー・クリエイティブ職
- テーブル内のスクロール
初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか？どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>
- ベストアンサー
- HTML
- コンテナ内で文字を中央に表示したい
<div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？ よろしくお願いします。
- ベストアンサー
- HTML
- ラジオボタンで指定したテーブルの色変更をする
こんにちは、初めまして。一人では解決できないので・・・どなたか教えてください（＞＜）よろしくお願い致します。 やりたいことは、ラジオボタンで指定した部分のテーブル内のみ色を変更するということです。背景色を変更するというやり方はわかるのですが、指定した位置のみ色を変更するというプログラムの組み方がわかりません・・・近いサンプルなどあったのでいじってみたのですが、応用ができないみたいで、、意図した通りの動きにすることはできませんでした。。 ほんとに初歩的な質問でもうしわけございませんが、どなたかよろしくお願い致しますm(_ _)m ソースは以下になります。 ※黄のラジオボタンを選択すると『変更！』の部分が黄色に変更し、黒のラジオボタンを選択すると『変更！』の部分が黒色に変更する・・・（他の色も同じ動きです）という感じです。 <table width="240" height="104" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="238" height="32"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10%" style="padding-left:3px;" align="left"> <input name="radiobutton" type="radio" value="radiobutton" checked="checked" /> </td> <td width="9%" align="left">白</td> <td width="11%" style="padding-left:3px;"> <input name="radiobutton" type="radio" value="radiobutton" /> </td> <td width="9%">黄</td> <td width="11%" style="color:#FF0000; padding-left:3px;"> <input name="radiobutton" type="radio" value="radiobutton" /> </td> <td width="9%">黒</td> <td width="11%" style="padding-left:3px;"> <input name="radiobutton" type="radio" value="radiobutton" /> </td> <td width="9%">赤</td> <td width="10%" style="padding-left:3px;"> <input name="radiobutton" type="radio" value="radiobutton" /> </td> <td width="9%">黄</td> </tr> </table> </td> </tr> <tr> <td height="72"> <table width="98%" height="62" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td valign="top">変更！</td> </tr> </table> </td> </tr> </table>
- ベストアンサー
- JavaScript
- テーブルを作ったんですが…
はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- テーブル高さ指定タグについて
テーブル高さ指定タグについて サイズがバラバラの４枚の画像をテーブルを使って同じ幅・高さ縦横各２枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか？
- ベストアンサー
- HTML
- テーブルの中の複数行テキスト欄の下に書き込めない
またもスペースお借りします。 TOPページで使う予定の更新履歴を残す 複数行テキスト欄の下にバナーやボタンを貼りたいのですが、 なぜが外テーブルからはじき出されてしまうのです。 複数行テキスト欄の上には書き込めるのですが、 下に書き込むようにするには、どのようなタグを入力すれば良いでしょうか？ 具体的に教えてくださると助かります。 これがコピペです↓ <html> <head> <title>top</title> </head> <body background="http://背景URL"> <Basefont Size="2"> <br> <br> <table align="center"border="0" width="700" height="500" style="border:3px double #999999;" cellpadding="5" cellspacing="0"bgcolor="#ffffff"> <Tr> <Td> <br> <Td Align="left" Valign="top"> <B>●更新履歴</B> <div style="width:230px;height:130px;overflow-y:scroll"style="border:3px double #000000;" cellpadding="5" bgcolor="#ffffff"Td Align="left"Valign="bottom"> ああああ<br> ああああ<br> ああああ<br> </table> </div> <br> あああああああああ </Td> </Tr> </Table> </body> </html>
- ベストアンサー
- HTML
- テーブルで中央に指定したい
1行1列の横100％ 縦100％に指定したテーブルを1つ そのテーブルの中に1行1列の横100px 縦100pxが1つ このようにした場合、中に入れたテーブルはどの解像度でも画面の中心にくるはずです。 しかし、IE6で確認すると横の中央にはくるのですが縦の中央にはきません。 しかしネスケ4.7ではイメージ通りになっています。 なぜでしょうか？ [ソース参考] <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table width="100" height="100" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0033CC"> <tr> <td width="100" height="100"><center> <font color="#FFFFFF"><strong>中央</strong></font> </center></td> </tr> </table> </td> </tr> </table>
- 締切済み
- HTML
- tableでレイアウトが崩れる場合
技術の足りなさからCSSにできなかったので、再度テーブルでサイズを指定してやってみようとしているところです。 どこかの数字がおかしくなっていると思うのですが、どうしてもわかりません。 ちゃんと表示できるブラウザとそうでないブラウザがあり、Firefoxは環境設定により表示が崩れる場合があります。 使用ソフトはビルダーの１１です。 なんでも良いのでどうぞアドバイスをよろしくお願い致します。 <body> <div ALIGN="center"> <table> <tbody> <tr> <td CLASS="td4" HEIGHT="70"> <table WIDTH="600" CELLSPACING="1" CELLPADDING="0"> <tbody> <tr> <td VALIGN="top" CLASS="td1" WIDTH="400" ALIGN="left" HEIGHT="180"> <b>文字 <textarea ROWS="15" COLS="70">文字</textarea><br> <br> </td> <td VALIGN="top" CLASS="td1" WIDTH="100" HEIGHT="180"> <table CELLSPACING="0" CELLPADDING="4"> <tbody> <tr> <td CLASS="td2" HEIGHT="16" WIDTH="100">文字</td> </tr> </tbody> </table> 文字 <br> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div> </body>
- ベストアンサー
- HTML
