• ベストアンサー

NNでテーブルの枠線(BORDER)の設定は?

NN6です。 BORDERを使用したいのですが、NNではうまくいきません。 <TABLE>タグにあてはめるとだめだときいたので、TDにあてはめようとしているのですが…。 HEAD内で TDにBORDER-STYLE="SOLID; BORDER-COLOR:GRAY;" としました。これをTD CLASS=*** としているのですが、一向に線は出てきません。 どのように直せばいいのでしょうか?

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

  • ベストアンサー
回答No.1

とりあえずダブルクォーテーションは不要なので削除しましょう。 BORDER-STYLE=SOLID; BORDER-COLOR:GRAY; それでも出なかったらボーダーの太さも明記しておきましょう。 BORDER-STYLE=SOLID; BORDER-COLOR:GRAY;BORDER-WIDTH:1pt;

w-inty
質問者

お礼

回答ありがとうございます。 なぜかダブルクォーテーションをつけてました(^^; (実際はつけてません) TD.TDLEFT{BORDER-STYLE:SOLID; BORDER-COLOR:CORNFLOWERBLUE; BORDER-WIDTH:1pt;} <TD CLASS=TDLEFT> としてみましたが、BORDERが表示されませんでした。 どこが駄目なのでしょうか?

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • nuruhho44
  • ベストアンサー率57% (38/66)
回答No.3

追加です。 :のほうはご自分で修正なさっていたのですね。失礼しました。 それと、TDのセル内に何も入っていないと枠線は表示されません。 <TD CLASS=TDLEFT></TD> ではダメということです。

w-inty
質問者

お礼

無事できました。 みなさんありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • nuruhho44
  • ベストアンサー率57% (38/66)
回答No.2

スタイルシートですよね? だったら TD{ border-style : solid; border-color: gray;} としてください。=ではなく:ですよ。小文字で書きましたが、大文字でもいいです。 クラス名による指定なら <TD class="ABC"> とした場合、 .ABC{ border-style : solid; border-color: gray;} TDタグに書き入れる場合は、 <TD style="border-style : solid; border-color: gray;"> です。 私も以前間違えて記述したことがあったのですが、IEはそれでも反映しましたので、かえって気付くのが遅れました。お互い気をつけましょうね。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • NN使用でのCSSでのBORDERについて

    IEで TD.TD1{BORDER-STYLE:SOLID; BORDER-COLOR:CORNFLOWERBLUE; BORDER-WIDTH:1; BACKGROUND-COLOR:ALICEBLUE;} のように指定すれば、細い線で囲まれたものをかくことができますが、NNでは、背景色は有効になっても線が出てきません。 これを有効にするにはどのようにしたらいいのでしょうか? また、IE・NNで表示結果が違うCSSの一覧などが載ってるような便利なサイトがもしあったら教えてください。

    • ベストアンサー
    • CSS
  • テーブルの枠線

    IEブラウザのバージョンにより、表示が変わることはわかっているのですが どうしても解決できないので質問させていただきます。 対応ブラウザがIE8からIE11という前提なので、まずはIE8で試してみました。 きれいに表示できました。 が、IE11で表示したら、見出しは枠線が表示されました。 でも、中の罫線が表示されません。(画像添付) IE9、IE10はソフトを入れ直しが必要なので、また未確認です。 <meta>タグを入れてもダメでした。(IE=edge) IE8を捨ててもよいので、IE11で枠線を表示させるにはどうしたらよいのか、 ご教授願えないでしょうか? widthの指定もしているし、border-styleも記述しているつもりですが IE11では何が足りないのか、わかりません。 以下にソースコードを記載しますので よろしくお願いいたします。 ※まだdebug中なので、罫線以外につきましては無視願います。 <html> <head> <style type="text/css"> #midashi { border:2px solid #ffffff; border-collapse:collapse; } #table1 { border:2px solid #3d9f51; border-collapse:collapse; } #table0 { border:2px solid #83ca51; border-collapse:collapse; float:left; margin-right:-3px; } #table1 .td0{ width:15px; height:20px; border: none; text-align:left; font-size:80%; } #table1 .td1{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "dotted"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "solid"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2bg{ background-color:#83ca51; } #table0 .td3{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#83ca51; border-collapse:collapse; text-align:center; font-size:80%; } #table0 .td3non{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#ffffff; border-collapse:collapse; text-align:center; font-size:80%; } </style> </head> <body> <table id="table0"> <script type="text/javascript"> //**************************************************************************** //--- 番号 for(i=0; i<9; i++){ document.write('<tr>'); if( i == 0){ document.write('<td class="td3non"> </td>') }else{ document.write('<td class="td3">部屋' + i + '</td>') } document.write('</tr>'); } //--- //**************************************************************************** </script> </table> <table id="table1"> <script type="text/javascript"> //**************************************************************************** //--- 見出し document.write('<tr>'); for(j=0; j<48; j++){ // 30分単位の一日分 if( j%2 == 1){ document.write('<td class="td2 td2bg"></td>') // 時間表示無し }else{ document.write('<td class="td0 td2bg">' + (j/2) + '</td>') // 時間表示有り } } document.write('</tr>'); //--- //**************************************************************************** //**************************************************************************** //--- 時間テーブル for(i=0; i<8; i++){ // i:部屋の数 document.write('<tr>'); for(j=0; j<45; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2"></td>') // solid }else{ document.write('<td class="td1"></td>') // dotted } } for(j=0; j<3; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2" style="font-size:50%;text-align:center;">・</td>') // solid }else{ document.write('<td class="td1" style="font-size:50%;text-align:center;">・</td>') // dotted } } document.write('</tr>'); //--- //**************************************************************************** } </script> </table> </body> </html>

    • ベストアンサー
    • CSS
  • テーブルのスタイルを効率よく設定するには?

    同じページに複数のテーブルがあり、別のスタイルを適用させたい。 ---- <style TYPE="text/css"> TABLE.A {border-style: solid; } TH.A { color: red; } TD.A { color: blue; } TABLE.B {border-style: double; } TH.B { color: green; } TD.B { color: black; } </style> <table class=A><tr><th class=A>A</th><td class=A>A</td></tr></table> <table class=B><tr><th class=B>B</th><td class=B>B</td></tr></table> --- <table><th><td>タグにclassを書けばいいのですが、もっとすっきりした方法はないでしょうか?

    • ベストアンサー
    • HTML
  • テーブルでセルの枠線を消す(CSS)

    表をつくり、下記の方法でセルの枠線を消しています。 <html> <head> <style type="text/css"> <!-- td{border-color:black;} --> </style> </head> <table border> <colgroup span=2 width=50></colgroup> <tr> <td>a</td> <td style={border-style:none;}>aa</td> </tr> <tr> <td>b</td> <td>bb</td> </tr> </table> </html> セルのタグ<td>内にスタイルシートを設定するだけで消せると思ったのですがうまくいかず、 先頭で設定するスタイルシートで<td>のボーダー設定をすると何故か消す事が出来ました。 なぜ<td>内の設定だけで消えないのか理由が分かる方、説明お願いします。

    • ベストアンサー
    • HTML
  • 枠線が表示されません

    初歩的な質問ですみません。 以下のようなテーブルを組んでいるのですが 枠線が表示されません。 どこがおかしいのでしょうか? 宜しくお願いします。 ==================================HTML================================== <html> <head> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <table class="table1"> <tr> <th>左</th> <th>真ん中</th> <th>右</th> </tr> <tr> <td class="blue">1</td> <td class="blue">田中</td> <td class="blue">55</td> </tr> <tr> <td class="white">2</td> <td class="white">鈴木</td> <td class="white">42</td> </tr> <tr> <td class="blue">3</td> <td class="blue">斉藤</td> <td class="blue">20</td> </tr> </table> </body> </html> ==================================CSS================================== /*テーブル全体*/ .table1 { border-collapse: collapse; /* 枠線の表示方法 重ねる */ border: 2px #757575 solid; /* テーブル全体の枠線(太さ・色・スタイル)solid:実線 */ margin-top: 10px; /* 表示位置 */ margin-left: 25px; /* 表示位置 */ } /*テーブルの見出し部分*/ th { font-size:10pt; text-align:left; /*左寄せ*/ color:#888888; /*テキスト色*/ background-color:#B8B8B8; /*背景色*/ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ border-spacing: 0; /* 隣のセルとの間隔 */ } /*テーブルのデータ部分*/ td { font-size:10pt; text-align:left; /*左寄せ*/\ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ } .blue{ background-color: #CCCCFF; } /* セル色:青 */ .white{ background-color: #FFFFFF; } /* セル色:白 */ /*背景色と文字色*/ body { background-color: #969696; color: #000000; }

    • 締切済み
    • CSS
  • スタイルシートをhead内で定義したい

    下のテーブルのようにしたいんですが、上のテーブルはすきまができています。 このすきまをなくすために、<STYLE>の中を修正してください。 <TABLE>内は変更せずに<STYLE>だけでできるはずです。 <HTML> <HEAD> <STYLE> table.ccc{border:solid;border-color:#bbbbcc} td.ccc{border:solid;border-color:#bbccbb} .ccc th{border:solid;border-color:#ccbbbb} </STYLE> </HEAD> <BODY> <TABLE class="ccc"> <TR class="ccc"> <TH>名前</TH> <TH>住所</TH> </TR> <TR class="ccc"> <TD class="ccc">太郎</TD> <TD class="ccc">東京都新宿区</TD> </TR> <TR class="ccc"> <TD class="ccc">花子</TD> <TD class="ccc">沖縄県那覇市</TD> </TR> </TABLE> <br> <TABLE cellspacing=0 style="border:solid 4px #ddddee"> <TR> <TH style="border:solid 4px #eedddd">名前</TH> <TH style="border:solid 4px #eedddd">住所</TH> </TR> <TR> <TD style="border:solid 4px #ddeedd">太郎</TD> <TD style="border:solid 4px #ddeedd">東京都新宿区</TD> </TR> <TR> <TD style="border:solid 4px #ddeedd">花子</TD> <TD style="border:solid 4px #ddeedd">沖縄県那覇市</TD> </TR> </TABLE> </BODY> </HTML>

  • 横に並べたテーブル

    200×200px程度のテーブルを複数(行数や列数はバラバラです)横に並べたいのですが、とりあえず、 <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ページのタイトル</title> <style type="text/css"> <!-- body{ color:#330000; background-color:#cc3333; } table.a{ background-color:#ffffff; padding:1px; border:1px solid #000000; display:inline; margin:5px; } td.a{ text-align:center; vertical-align:middle; border:1px solid #000000; font-size:small; padding:1px; background-color:#ffffff; } div.center{ text-align:center; } --> </style> </head> <body> <div class="center"> <table class="a"> <tr><td class="a">AAAAAAAAAA</td></tr> <tr><td class="a">AAAAAAAAAA</td></tr> </table> <table class="a"> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> </table> </div> </body> </html> という感じでdisplay:inlineで並べました。 これだとIEでは普通に見えるのですが、Ffだと表示が崩れてしまいました。 どこがいけないのかよくわかりません……。FfやNNでもちゃんと見えるようにしたいのですが、どうすればいいでしょうか。 また、スタイルシートでもっといい他の方法があったら教えていただけると助かります。 よろしくおねがいします。

    • ベストアンサー
    • HTML
  • tableにtable。table同士の間隔を拡大

    スクロールバーを付けるためにtable内にtableを入れました。 中のtableとtableの間隔を開けたいです。 言葉が少ないですが、その分画像で頑張って説明します。 お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>

    • ベストアンサー
    • HTML
  • FireFoxでborder-collapseを使うと余計な枠線が表示される

    FireFoxでborder-collapse:collapseを指定すると、余分な枠線が表示されてしまいます。 IEでは問題ありません。 <HTML> <HEAD> <title>TEST</title> <style type="text/css"> table { border-collapse: collapse; } td { border: 1px solid black; } td.none{border:none;} </style> </HEAD> <BODY> <table> <tbody> <tr><td rowspan="2">test</td><td class=none>&nbsp;</td><td rowspan="2">text</td><td class=none>&nbsp;</td></tr> <tr><td class=none>text</td><td td class=none>&nbsp;</td></tr> <tr><td rowspan="2">test</td><td class=none>&nbsp;</td><td rowspan="2">text</td><td class=none>&nbsp;</td></tr> <tr><td class=none>text</td><td td class=none>&nbsp;</td></tr> <tr><td class=none>&nbsp;</td><td td class=none>&nbsp;</td><td class=none>&nbsp;</td><td class=none>&nbsp;</td></tr></tbody> </table> </BODY> </HTML> 何か対策は無いでしょうか?

  • borderが1のテーブル

    ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか? 私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。 よろしくおねがいします。

偏心や偏見が強い人について
このQ&Aのポイント
  • 先入観やマイルールを押し付ける人は変わることはないのか?
  • 趣味などを制限させる人の存在について
  • 価値観の押し付けで折り合いをつけることが出来ているのか?
回答を見る

専門家に質問してみよう