• 締切済み

table内のCSS制御

cgi等で自動生成するテキストが表示されるtableタグをCSSで成形しようとするのですが、長いテキストの時に2行にするにはどのようにしたらよいのでしょうか。 ご教授いただけますとたすかります。 または、一番希望しているのは、難しいかもしれませんが、tableの幅をオーバーするテキストが生成されたとき自動的にその部分を表示しないことがよいのです。例えば 「あいうえおあいう・・・・」 というイメージです。 現在作ってみたCSSは、下記になります。 clear:both; と position:relative; は、外してみたり いろいろ試してみました。 また、.whatsnew_block もコメントアウトしてましたが 出来ませんでした。 ------------ div#contents .whatsnew_block { clear:both; margin:0px 0px 20px 0px; } div#contents .table { clear:both; position:relative; width: 190px; margin:10px 0px 0px 0px; } div#contents .table td { padding:1px 5px 1px 5px; } div#contents .table td image { margin:0px 0px 0px 0px; }

noname#79809
noname#79809
  • HTML
  • 回答数2
  • ありがとう数1

みんなの回答

  • rukuku
  • ベストアンサー率42% (401/933)
回答No.2

はじめまして まず、確認ですが、テキストが質問文にあるような「あいうえおあいう・・・・」ではなく「aaaaaaaaaaaaaaaaaa…」と半角英数字をずっとつなげていませんか? この場合、ブラウザは1つの単語と判断し、幅の設定を無視して幅を広げてしまうことがあります(IE6とFirefox3はそう表示されます)。 また div#contents .table と長い設定ですが、HTMLの方で階層(タグの閉じ忘れにも注意)やID,CLASS名のスペルは合っていますか? 大丈夫と思っていても、案外やるミスです。 withの値を変えてみて、ちゃんと機能しているか確認してみてください。

noname#79809
質問者

お礼

はじめまして。 下記、有り難うございます。 おっしゃるように通常の文章にいたしましたらきちんと折り返しました。 お礼が遅れて恐縮です。

回答No.1

テーブルの幅を超えたら勝手に折り返して欲しいと言うこと? だとしたら、 tableはタグ?、それとも.tableなんでクラス名?(ドットが付いてても良いの?) 幅を固定したいテーブルに効いていなければ、折り返さずに広がっちゃうと思うけど... 文字数で意図的に改行しないのなら、CSSでは無理かも

noname#79809
質問者

補足

回答有り難うございます。 行いたいことは、生成されるデータがtable内でおっしゃるとおり勝手に 折り返すか、・・・として表示されないかなのです。 現在は、このCSSで各行のmargin paddingを調整しております。 表示される行が高さの幅は調整されますので良いのですが、テキストが オーバーしたとき、tableが横に広がってしまいます。 CSSで難しいでしょうか。 生成されたhtmlには、IDを付ける事は可能です。

関連するQ&A

  • divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

    divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・?

    • ベストアンサー
    • CSS
  • CSS idセレクタについて教えてください

    いろいろな Web の CSS を参考にして CSS を書いているのですが、id セレクタの並列記載について理解が出来ないので教えてください。 とある Web にあった CSS の記述で、 #contents { margin: 0px; padding: 0px; width: 800px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; background: #FFFFFF url(title.gif) no-repeat center top; height: 60px; width:800px; text-align: center; display: block; position: relative; } は理解できるのですが、左側にメニューを配置する設定に関して #contents #sidemenu { margin: 5px; padding: 0px; float: left; width: 160px; text-align: left; background-color: #FFFFFF; } となっていて、#sidemenu ではなく、#contents #sidemenu となっていました。 <div id="contents"> あいうえお <div id="header"> かきくけこ </div> <div id="sidemenu"> メニュー </div> さらにコンテンツ </div> とすれば、contents の要素は header にも sidemenu にも継承されると思っていたのですが違っているのでしょうか。 contents と sidemenu の両要素を反映させるために #contents #sidemenu となっているのでしょうか。 初歩的な質問だと思いますが、どうぞよろしくお願いします。

    • ベストアンサー
    • CSS
  • cssによる配置の計算が合いません

    cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>

  • フルCSSでFirefoxでデザインが崩れてしまいます。

    フルcssHPに挑戦しようと思っています。 cssでIEでは思ったような表示が可能ですが Firefox、Operaでは「contents」内のコンテンツが 「container」>を突き抜けて表示されてしまいます。 下記がhtml、cssソースになります。 【HTML】 <body> <div id="container"> <!--メインナビ--> <div id="contents"> <div id="subnavi"> <ul> <li>サブナビ1</li> <li>サブナビ2</li> <li>サブナビ3</li> <li>サブナビ4</li> </ul> </div> <div id="main"> メインコンテンツが入ります </div> </div> <!--フッター--> </div> </body> メインナビ、フッターアンカーリンクは文字数制限上削除しています。 【CSS】 body{ text-align:center; background-color:#ffffff; font-size:10px; color:#333333; } body div { text-align:left; margin: 0 auto; } #container{ text-align:left; width:724px; background-color:#ffffff; padding:15px 18px; position: relative; border:1px solid #666; } #contents{ width:724px; background-color:#ffffff; text-align:left; border-bottom:8px solid #666666; margin-bottom:10px; position: relative; clear:both; } #subnavi{ float:left; width:200px; } #main{ float:left; width:495px; padding-left:29px; } この突き抜けを防止するにはどうしたらよろしいのでしょうか。 「contents」 を削除して表示するとどのブラウザでも表示が可能ですので <div id="contents">の記述が何かおかしいのでしょうか。 それとも根本的にブラウザの問題なのでしょうか? (ブラウザは最新版を使っています) 皆様、よろしくご回答お願いいたします。

    • ベストアンサー
    • CSS
  • CSSで画面を構成しています。

    CSSで画面を構成しています。 左ブロック、右ブロック共に角丸の四角にしたいので、**_head.gifというようなフタとソコになるような画像を使っています。 このままだと左右ブロックの高さが当然そろわないのですが、何か良い方法はないでしょうか? テーブルレイアウト以外であれば、多少イレギュラーな方法でもかまいません。 *css********** div#body{width:800px; margin:10px auto; text-align:center; padding:0; } div#header{padding:0; margin:0 0 10px 0; background-image:url(**.gif); width:800px; height:50px; text-align:left; } div#main{ width:800px; text-align:left; } div#submenu{padding:0; margin:0 10px 10px 0; width:200px; text-align:left; float:left; } div#contents{padding:0; margin:0 0 10px 210px; width:590px; text-align:left; } div#footer{padding:0; margin:0 0 5px 0; clear:both; width:800px; height:30px; text-align:left; } *html**** <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> <div id="submenu"> <img src="img/common/sub_head.gif" width="200" height="10" />  <div>左ブロック</div> <img src="img/common/sub_foot.gif" width="200" height="10" /> </div> <div id="contents"> <img src="img/common/main_head.gif" width="590" height="10" />  <div>右ブロック</div> <img src="img/common/main_foot.gif" width="590" height="10" /> </div> </div> <div id="footer"> フッター </div> </div>

    • ベストアンサー
    • HTML
  • CSSハックの使い方を教えてください

    CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・ そこで、この際CSSハックを使おうと思っています。 といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・ など個別のブラウザに異なったCSSを指定することができるのでしょうか? 実際の記述方法を教えていただけないでしょうか? 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・ ちなみに、この現象のほかの解決方法ってあるのでしょうか? #wrapper{ position:relative; width:870px; margin:0px auto; text-align:left; } #foot{ position:relative; width:100%; height:auto; clear:both; }

    • ベストアンサー
    • 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の設定方法について

    CSSは外部ファイルにし、十数枚あるHTMLに「div id=contents内にあるTableは全て共通のレイアウト」 となるよう下記のCSSを設定しました。 --------CSS----------------------------------------- #contents{margin-left: 70px;} #contents table{width: 650px; border: solid 1px #B1B2B2; border-collapse: collapse; margin: 15px 0px;} #contents tr, td ,th{padding: 4px; border: solid 1px #B1B2B2; border-collapse: collapse;} --------HTML----------------------------------------- <div id="contents">  <table>   <tr>    <th>項目</th>   </tr>   <tr>    <td>項目1</td>   </tr>  </table> </div> ------------------------------------------------------- しかし、どうしても違うレイアウトにしたいTableが出てきた為、下記CSSを追加、 HTMLは<div id="contents">の部分を<div id="login">に変更したのですが 追加CSSが反映されず、id=contentsの設定が残ったままになってしまいます。 色々いじってみたのですが、どこが間違っているのやら皆目見当がつきません。 --------追加CSS----------------------------------------- #login{text-align: center; } #login table{width: 450px; border: solid 2px #666666; border-collapse: collapse;} #login tr, td ,th{border: solid 1px #666666; border-collapse: collapse;} --------HTML----------------------------------------- <div id="login">  <table>   <tr>    <th>項目</th>   </tr>   <tr>    <td>項目1</td>   </tr>  </table> </div> 拙い文章で恐縮ですが、ご助言いただけると大変助かります。 説明不足や意味不明箇所は補足させていただきますので、どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSSでブラウザごとにレイアウトが崩れたりします。

    はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■    ■=ヘッダー □□●●●●    □=メニュー □□●●●●    ●=コンテンツ(中身)1 □□○○○○    ○=コンテンツ(中身)2 □□○○○○    ▲=フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー(□)とコンテンツ(○+●)の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー(□)の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ(○+●)部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE7のみでして、IE6やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか? body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSS初心者です。至急お願いします!

    現在CSSでHP制作に挑戦しています。 自分なりに調べながら制作していたのですが、どうしても2点だけ上手くいきません。 ●サイト全体を中央表示 (widthを指定して左右のmarginをautoにすればブロック要素をセンタリング出来る、というのは理解しています。) ●SCCでロールオーバー表示 この2点です。 文章が下手くそなので、キャプチャを貼らせていただきました。 現在の作業画像です。 見にくいので… 【HTML】 <head> <link href="main_box.css" rel="stylesheet" type="text/css"> </head> <body topmargin="0"> <div id="bg"> <div id="head">熊本県でお風呂のリフォーム・修理をお考えの方はお気軽にご相談ください。</div> <div id="rogo"></div> <table width="1024" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="menutop"></td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </div> </body> 【CSS】 #head { font-size: 12px; color: #FFFFFF; background-color: #000000; background-position: center top; text-align: left; margin: 0px; padding: 10px; height: 32px; width: 1024px; } #rogo { background-repeat: no-repeat; height: 70px; width: 1024px; background-image: url(img/rogo.gif); margin: 0px; background-position: center top; margin-left:auto; margin-right:auto; } .menutop { background-image: url(img/top.gif); background-repeat: no-repeat; display: block; height: 37px; width: 78px; position: static; } .menutop a:hover{ background-image:url(img/top2.gif) } #bg { margin: 0 auto; margin-top: 0px; background-color: #FFFFFF; width: 1024px; background-position: center top; } です。 情けない事に、どこが間違っているのか全くわかりません。 アドバイスをいただけると幸いです。 現在Macromedia Dreamweaver MXを使用しています。 ちゃんと保存しているのですが、もしかしたら、修正後のCSSがHTMLに反映されていないだけ…? そんな時はどうやったら反映されるでしょうか? ちなみにコチラのサイト様を参考にさせていただいています。 http://hac-design.com/ よろしくお願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう