テーブル幅の調整方法について
- テーブルの横幅を指定する方法について詳しく教えてください。
- 文字サイズを変更するとテーブル内の文字が表示されない現象が起こります。テーブルの横幅の指定方法を調整することで解決できるのでしょうか。
- テーブルの中の文字を全て表示するためには、どのような横幅の指定が適切なのでしょうか。
- ベストアンサー
テーブル幅について
どなたか教えてください。 現在、strictで、cssを用いてソースの手打ちで HPを作成しています。 文字サイズをユーザー側で変えられるように 文字をemで設定しました。 文字サイズを小→大に変更すると テーブルの中の文字が全部表示されません。 （更新ボタンを押すと正常に 全部の文字が表示されますが） この症状のときは、テーブルの横幅などをピクセル指定 していました。 テーブル幅がピクセル指定しているために 正常に表示されないのかと思い、テーブル幅などの 指定も全てem指定に変更しました。 今度は、全部の文字が表示されるのですが、 文字サイズをユーザー側で小さくすると テーブルの横幅が極端に狭くなってしまい、 最大にすると、横幅が広くなりすぎてしまいます。 理想では、横幅を固定し、文字を全て 表示させることです。 テーブルの横幅を30emに指定し、中のtdタグは 計30emになるように指定しています。 よろしくお願いいたします。
- aeromaki
- お礼率50% (1/2)
- HTML
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
修正部分のみですが ********************************************* table.kouza{ width:590px; /*table-layout:fixed;*/ border-collapse:collapse;} td.kouza{border:solid 1px #999999; padding:0.2em;} ********************************************* ie6,netscape7.1とも問題なく表示されました。 取り急ぎお返事までに失礼します。
その他の回答 (1)
- q-tip
- ベストアンサー率28% (2/7)
こんにちは。 emはユーザ側の文字の大きさに左右されますので文字サイズを大きくすれば、emで指定したセルも当然大きくなります。 「テーブル幅をpxで指定すると、文字が全部表示されない」とは具体的にどのようになるのでしょうか？ もしくは、td幅をpx指定でサンプルを作成してみましたところそのような症状は起こらなかったので(ie6 netscape7.1)、できれば問題部分のソースを見せていただけるとありがたいのですが。
補足
q-tip様 お返事がおそくなってしまいすみません。 ご回答ありがとうございました。 セルのサイズが大きくなることがわかっただけでも 大きな前進となりました。 ありがとうございました。 「テーブル幅をpxで指定すると、文字が全部表示されない」という問題なのですが、 現在、tableの中にtableを入れるやり方で レイアウトしています。 問題のシートがあまりにも長すぎるので、 部分的にカットして、書かせていただきます。 ＊＊＊＊＊html＊＊＊＊＊ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <link rel="stylesheet" type="text/css" href="css/style.css"> <table class="honbun"> <tr> <td class="top"> <table class="kouza" summary="アロママッサージ"> <tr> <td class="kouza"> <p class="font3"> マッサージ </p> </td> <td class="kouza"> <p class="font3"> 15:00～20:00（要予約） </p> </td> <td class="kouza"> <p class="font3"> あああああああああああああああ </p> </td> <td class="kouza"> <p class="font3"> あああああああああああああああ </p> </td> </tr> </table> <table class="kouza" summary="このページの一番上へ"> <tr> <td class="right"> <p class="font3"> <a href="2.html"> ▲このページの一番上へ </a> </p> </td> </tr> <tr id="VOICE"> <td class="top"> <p class="font4"> <span>■</span> トレーニング </p> </td> </tr> </table> </td> </tr> </table> </body> </html> ＊＊＊＊＊＊css＊＊＊＊＊ body{background-color:#ffffff; margin-left:0em; margin-top:0em; margin-bottom:0em; margin-right:0em; margin-width:0em; margin-heiht:0em; } table.honbun{ width:590px; border-collapse:collapse; border:0em; position:absolute; top:97px; left:120px; cellspacing:0em; cellpadding:0em; } table.kouza{ width:590px; table-layout:fixed; border-collapse:collapse;} td.top{vertical-align:top; } td.right{vertical-align:top; text-align:right;} td.kouza{border:solid 0.01em #999999; padding:0.2em;} span{color:#0000ff; font-size:0.9em;} fontのCSSは、別ファイルで、javascriptを使って 読み込ませています。 font1～4まであり、全てemでサイズを指定しています。 :::::::::::::::::::::::::::::::::: 問題の動作なのですが、私は通常文字サイズを [中]にして、ネットを見ています。 （[中]の状態にしていただいて、一度更新ボタンを 押してみてください） その状態で、文字サイズを[最大]にすると、 見えなくなる文字がでてきます。 （”このページの一番上へ”などが上半分が 切れた状態になります。”あ”も見えない部分が でてきます。） これを全て見える状態にしたいのですが、 どのようにしたらいいでしょうか？ 教えてください。よろしくお願いいたします。
関連するQ&A
- テーブルの横幅が絶対に変わらないようにしたい。
現在CSSのプログラミングをしています。htmlでは本来テーブルをレイアウト目的に使ってはいけないそうなので、<div>で文章を囲んでCSS側でborder指定で似たような表現をしています。位置はpositionで。 文字サイズを指定する際、今まではpt単位でやってたのですが、ユーザーが文字サイズを変えられるようem単位に変更しました。 それをブラウザ上でチェック（文字サイズを最大に）したところ、border内の文字列（大きさをemで指定）が大きくなってborderの横幅を押し広げてしまいました。これが起こらないよう、横幅が絶対に変わらないようにするにはどうしたら良いのでしょうか？widthをpxで指定してもダメでした。調べてみたところ、tableでも同じような状態になりました。 1つ解決策としてスペーサーgifを使う方法を見つけたのですが、なんかそれは素人技っぽくてできれば使いたくないのです。プロのデザイナーさんはそういうの塚使わないでしょうしね。
- ベストアンサー
- HTML
- テーブル幅・縦の固定
こんにちは。 Dreamweaver MX2004でウェブサイトを作りました。 大きなテーブルの中にもうひとつ小さなテーブルを入れたのですが そのテーブルの横幅は均一に出るのですが、縦の幅が各ページ違って表示されてしまいます。propertyでサイズを同じ高さに指定しても固定されません。初歩的な質問で申し訳ないのですが、どなたかご回答よろしくお願いいたします。
- 締切済み
- ホームページ作成ソフト
- tableの幅をがっちり固定
<table width="500"> <tr> <td> 長い文字列長い文字列長い文字列長い文字列長い文字列.... </td> ... の場合、widthで500ピクセル幅を指定しているにもかかわらず横幅が500以上に成ってしまいます。 文字列に改行を加えればいいのですが、改行をしない方法で指定した500px内に納めることはできないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- Androidのフォントサイズ(SP)とピクセル数
Androidではフォントサイズを指定するときにspを使いますが、 例えば横幅768ピクセルの端末に幅いっぱい30文字等幅で表示する場合はspの計算をどのようにすればいいのでしょうか。 スケール(dpi)は2.0の端末になります。 同じく、横幅480ピクセル、dpiが1.5の端末に30文字等幅で表示する場合も同様に計算できるでしょうか。 表示はTextViewではなく、paintで行ないます。
- ベストアンサー
- Java
- TABLEの幅がっ？！
初めて質問します、WEBデザイナーをしている者です。 が、恥ずかしいことに、TABLEの幅がどうしても広がってしまってWindowサイズが幅800くらいになってしまいます・・・（涙） そのページのレイアウトは、まずヘッダー/メイン用/フッターを入れた3行1列の大きなテーブル（幅100%指定）があり、そのメイン用の中にメイン（幅90%指定）を入れ子にしている状態です。 メイン（幅90%指定）を消すと、ウィンドウ幅は自由に成り行きで動いてくれます。 でもメインを入れたとたんに800以上になってしまいます。 メイン（幅90%指定）を折り返し無しにしてないし、理由がわからないんです。 説明不足かとは思いますが、非常に困っています。 ヒントくらいでもいいのでアドバイスいただければと思いますm(._.)m
- ベストアンサー
- HTML
- DREAMWEAVERのテーブルの幅
WinXPでDREAMWEAVER MX2004を使用しています。 レイアウトにテーブルを使用しています。 標準モードではテーブルの幅は、指定どおり正しく表示されますが、拡張・レイアウトモードでは、指定したテーブルの幅と、括弧付きのテーブルの幅が出てきます。この括弧付きのテーブルの幅が、指定した値とは違っています。 各セルには正しい幅の値を入れているはずなのですが。 原因がわかりますでしょうか？ よろしくお願いします。
- 締切済み
- CSS
- tableの幅・高さの固定
初心者です。Dreamweaver2004MX操作の質問です。 【問題点 テーブルに適当な幅・高さを作成し、そのテーブルに画像ファイルを 挿入した際、テーブルの大きさより画像ファイルの幅・高さが多きい 場合、画像や文字を優先される様でテーブルサイズが自動的に挿入したファイルやリンク先の画像ファイルの大きさ比例してテーブルの幅・高さが変わってしまいます。 【やりたい事 テーブルの幅・高さを固定し、そのテーブルにそのテーブル幅・高さより大きな画像ファイルや文字を挿入してもあくまで、 固定されたテーブル幅・高さに合わせ画像や文字を拡小表示(挿入)する事って出来るのでしょうか？ 大きい画像ほど、つぶれた画像になっても構いません。 スタイルシートの適用や拡張モードでの操作、 プロパティ等操作してみましたが、全くうまくいきません。 どなたかご教示願いますm(__)m
- ベストアンサー
- HTML
- dreamweaver8/テーブルの列幅
初心者です。よろしくお願いします。 ガイド本を読みながらその中の例題にしたがって勉強しているところです。 画像と文章入りのテーブル作成で、１行５列のテーブルをつくります。 １列目：スペーサーイメージ（横幅２０ピクセル） ２列目：画像 ３列目：スペーサーイメージ（横幅１０ピクセル） ４列目：文章 ５列目：スペーサーイメージ（横幅２０ピクセル） というようなテーブルなのですが、幅がめちゃくちゃです。ガイド本には、「１列目を入れた時点では正しく表示されませんが、他の列にコンテンツを挿入した時点で、正しく表示されます。」とか、「すべての列に入力が終わると、列幅が正しく表示されます。」と書いてあるんですが、全て同じように入力しても本の通りにならず、４列目の文章なんかは５文字ぐらいで次の行に改行されてしまい、長文が次々改行されありえない形のテーブルになってしまってます。 初心者なのでどこか見落としがあるのかもしれませんが、どうすれば列幅が正しく表示されるようになるでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- テーブルの幅固定について
テーブルの幅固定を以下のように行っているのですが文字が指定した幅を超えると、 幅を指定してるにも関わらず、文字が改行せずに幅が伸びてしまいます。 自動的に改行になるとばかり思っていました。 <br>での改行は考えていないので、テーブルの幅を絶対的に固定する方法ありますでしょうか？ <table width="50" border="0" style="background-color: #cecece"> <tbody> <tr> <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> </tr> </tbody> </table>
- ベストアンサー
- HTML
- テーブルの項目幅を固定するには？
ものすごく簡単な質問だと思うんですけど、なんせ初心者なのでどうかわかりやすく教えてください。 テーブル定義で％で列幅を指定しているのに、その中に文字をいれたとき、 その文字幅にあわせて幅がかわるんです。 そもそも％で指定するときの％って何に対しての％なんですか？画面幅？？ それともテーブル全体の幅ですか？ 横にスクロールしてもいいので列幅を固定する方法を教えてください。 過去の質問をチェックしてみたのですが、よくわかりませんでした。
- ベストアンサー
- HTML
お礼
q-tip様 ご回答いただきありがとうございました。 私はこの症状で何ヶ月も悩んでいました。 お蔭様で問題の症状がなくなりました。 感動しています。 ありがとうございました。