• ベストアンサー

CSSで文字が縮まらない方法

CSSの初心者です。 不明点があるので教えてください。 1.テーブルに文字を入力してあります。 ウィンドウサイズの大きさを小さくするとそのテーブルの 文字も縮まります。 私は日本人です。 ↓↓↓ 私 は 日 本 人 で す。 みたいになります。 ウィンドウサイズを小さくしても縦表示にならない方法は ありますでしょうか? 2.↑と類似質問になりますが、tdで幅指定(px)はできますよね? 自分がもっているCSS辞典には td {width: 200px;} がなく、 table {width: 200px;} しか掲載されていません。 やはりpx指定してもウィンドウサイズが小さくなるとその大きさを 維持できなくなるのでしょうか? HTMLのようになかなか思うような表示にならず細かいところで 苦労しています。

noname#102619
noname#102619

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

  • ベストアンサー
  • Muller3
  • ベストアンサー率81% (800/979)
回答No.1

>ウィンドウサイズを小さくしても縦表示にならない方法は ありますでしょうか? ソースを見ないと推測が難しいのですが、一つの可能性として。 tableにwidthの指定はされてますか? http://www.tagindex.com/stylesheet/table/table_layout.html こちらの例は縮みませんよね? http://www.tagindex.com/stylesheet/table/width_height2.html こちらの例のように、tableに幅が指定されておらず#example1(th)に幅を指定している状態では、ウインドウを小さくすると縮んでしまいますよね。

noname#102619
質問者

お礼

おっしゃったとおりやったらできました。 テーブルのwidthを指定すればいいんですね。

その他の回答 (1)

noname#39970
noname#39970
回答No.2
noname#102619
質問者

お礼

とても参考になるURLをありがとうございます。

関連するQ&A

  • CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。

    CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。 スタイルシートで、画像の縦サイズに合わせて中央揃えで文字を表示したいのですが、 どのように記述したら良いのかわかりません。 下記のようにテーブルを使えば簡単に出来るのですが、 これをスタイルシートのみで表現するにはどのように記述すればいいのでしょうか? ちなみに左側画像の縦サイズは変わります。 よろしくお願いします。 ------------------------------------------------------------------- <html> <head> <title>CSS</title> <style type="text/css"> <!-- #waku { width: 451px; margin: 0; padding: 6px 8px 6px 8px; background-color: #008837; } --> </style> </head> <body> <div id="waku"> <table width="435" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="80"><img src="hoge.gif" width="80" height="変わります"></td> <td width="355" valign="middle">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</td> </tr> </table> </div> </body> </html> -------------------------------------------------------------------

  • CSSでテーブルレイアウトが出来ません!

    現在DreamweaverMXでテーブルを作っているのですが、うまく表示されません。というか設定方法がよく分かりません。 テーブルは2列で10行のテーブルを作っているのですが、CSSから枠線の表示部分の設定を行っても反されません。現在はテーブルの外回りの線が表示されるだけなのです。 CSSは以下になります。 .maintable { font-size: small; padding: 5px; border: 1px solid #666666; text-align: left; height: auto; width: 400px; } 中身の枠線を表示するにはやはりtdやtrのCSS指定を行わないといけないのでしょうか?しかしホームページのメニュー部分をテーブルで作っているのでそちらにも反映されてしまい、表示が変になってしまいます。 もしtdやtrにclass指定をする場合、すべてのtdやtrに指定していくのでしょうか?そうすると、指定する数が沢山になってしまうのですが・・・。 この問題について、お分かりになられる方がいらっしゃいましたら、よろしくお願いいたします。

  • 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の外部ファイルで表示するには

    テーブルをCSSの外部ファイルを利用して表示させたいのですが 外部ファイルへの記入が間違っているのかうまくいきません。 作りたいテーブルは htmlで書くと <table border="1" cellspacing="0" bordercolor="#ffffff"> <tr><th colspan="4" bgcolor="#000000"> 見出し </th> </tr> <td width="125px">  内容1 </td> <td width="125px"> 内容2  </td> <td width="125px"> 内容3  </td> <td width="125px"> 内容4  </td> </tr> </table> といった感じです。 内容1~4も中心に寄せたいです。 テーブル全体は指定できても、th,tdの指定の仕方がよくわかりません。 外部ファイルにはどう書けばいいでしょうか。 初歩的かもしれませんがよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • テーブルの中の文字を縦に表示する方法

    テーブルの中の文字を縦に表示する方法はありますか? 今はわからないので、<br>で無理やり改行しています。 もっとスマートな方法があれば教えてください。 <style type="text/css"> table { width: 50%; height: 20px; border: 2px #2b2b2b solid; } td { border: 2px #2b2b2b solid; } </style> <table> <tr> <td>よこ</td> <td>た<br>て</td> </tr> </table>

    • 締切済み
    • CSS
  • cssで、1行2段のtableを記述するには?

    cssで、1行2段のtableを記述するには? → htmlのページに以下を挿入しました。 <table> <tr> <td width="2"></td> <td width="588"></td> </tr> </table> → htmlのページの<head>と</head>の間に以下を挿入しました。 <link rel="stylesheet" type="text/css" href="table.css"> → table.cssファイルを、onimotsuさんの指示に従い、以下のように記述しました。 TABLE{width : 640px;border-width : 0px 0px 0px 0px; padding-top : 0px;padding-left : 0px;padding-right : 0px; padding-bottom : 0px; background-color : #FFFFFF;} → table.cssファイルに以下を挿入するにはどうしたらいいのでしょうか? いろいろ試しましたが、うまくいきません。 <tr> <td width="2"></td> <td width="588"></td> </tr> → うまく挿入できれば、htmlのページのtableの項は次のようにすっきりとなります。 <table> </table> よろしくおねがいします。

  • <table>でセルをきっちり分けるには

    最近CSSばかり使ってtableがよくわからないのですが、tableのセルのサイズを挿入する文字の数に限らず常に一定にするにはどんな方法があるでしょうか? 例えば600pxのtableに2列のセルを入れるにはそれぞれのセルに300pxを指定する方法もありますが、CSSでtableのtdタグに50%のwidthプロパティを指定しても問題ないでしょうか?

    • ベストアンサー
    • CSS
  • テーブルを挿入すると他のCSSと干渉してレイアウトが崩れてしまいます。

    いくらやっても作成したテーブルを挿入するととの画像やメニューと干渉してレイアウトが崩れてしまいます。テーブルを取るとレイアウトが戻ります。。。 文字量の関係でテーブルだけ記入しました。 <HTML> <HEAD> <STYLE type="text/css"> <!-- /*テーブル*/ table {position:absolute; left:200px; top:450px; font-family:MS,UI,Gothic,標準; FONT-SIZE: 11px; COLOR: #666666; font-weight: lighter; text-align:center; border-collapse:collapse } caption { font-family:MS,UI,Gothic,標準; FONT-SIZE: 11px; COLOR: #666666; font-weight: lighter; text-align:left; } table,th,td {border:1px solid} div {margin:20px} --> </style> </head> <body> <div> <table> <caption>ジャズシューズサイズ表</caption> <tr><th width=70px>Sansha</th><td width=30px>2</td><td width=30px>3</td><td width=30px>4</td><td width=30px>5</td><td width=30px>6</td> <td width=30px>7</td><td width=30px>8</td><td width=30px>9</td><td width=30px>10</td><td width=30px>11</td> <td width=30px>12</td><td width=30px>13</td><td width=30px>14</td><td width=30px>15</td> </tr> <tr><th>(cm)</th><td>21</td><td>21.5</td><td>22</td><td>22.5</td><td>23</td><td>23.5</td><td>24</td> <td>24.5</td><td>25</td><td>25.5</td><td>26</td><td>26.5</td><td>27</td><td>27.5</td> </tr> </table> </div> </body>

    • ベストアンサー
    • CSS
  • CSSで「継承しない」という指定はありますか

    tableを入れ子にして td {width:200px;} とすると、すべてのtdに適用されますよね。 tdの中の入れ子になっているテーブルでは width指定はしたくない=200pxを継承したくないのです。 width:inherit; という属性はありますが、「継承しない」という値はありませんか? ちなみに、table>td {width:200px;}はIE非対応なので使用不可です。

    • ベストアンサー
    • HTML
  • cssで<div>にpaddingを指定したとき

    下のように、cssで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に740pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか? また、こうなるのは、私だけなのでしょうか? <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>

    • ベストアンサー
    • HTML

専門家に質問してみよう