ベストアンサー

FireFoxでのtable枠線の表示/非表示

2009/03/02 13:08

下記HTMLコードはテーブル(TDレベル)の枠線を表示するCSSクラスと非表示とするCSSクラスを用意し、ボタンを押す事によりjavascriptでCSSクラスを変更するものです。 <html> <head> <style TYPE="text/css"></style> <script Language="JavaScript"></script> </head> <body> <table class="tclass"> <tr> <td class="b" id="td1">Table1</td> <td class="b" id="td2">Table2</td> </td> </tr> </table> <button type='button' onclick='delLine("td2");' >枠線を消す</button><br> </body> </html> 上記のように２つのテーブルセルのうち、右側セルの枠線を消したいのですが、右側セルの右枠だけ消えて、残りの枠は表示されたままになります。因みに onclick='delLine("td1");delLine("td2");' のように、両方のセルともに枠線を消す場合は問題ありません。また、tableタグのborder-collapse:collapse指定を外しても成功する事を確認していますが、border-collapse:collapseはできれば指定したいです。また、FireFox以外ではIE、safari、operaでは問題ありません。何か対処方法をお分かりの方がおりましたらお教えください。よろしくおねがいします。

coogon21
お礼率83% (55/66)

HTML
回答数7
ありがとう数6

みんなの回答 （7）
専門家の回答

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

ベストアンサー

abril
ベストアンサー率69% (388/560)

2009/03/03 13:15 回答No.4

ANo.3です。 > separateで見た目をcollapseにする事ができません。テーブルの構成が、質問文で提供されたソースの通り1行2列で終わるものでしたら、例えば以下の様な方法で実現できます（collapseの場合とseparateの場合を比較できる様にしてあります）。 --------------------------------------------------------------------- 【サンプル】 --------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <h1>【A】オリジナル　"border-collapse: collapse;"　※id、class名のみ比較がしやすい様に多少変えてあります</h1> <table class="hoge1"> <tr> <td class="b" id="hoge1_data1">データ1</td> <td class="b" id="hoge1_data2">データ2</td> </td> </tr> </table> <ul> <li><button type='button' onclick='delLine("hoge1_data2");'>右セル枠線だけを消す</button></li> <li><button type='button' onclick='delLine("hoge1_data1"); delLine("hoge1_data2");'>左右セル枠線を消す</button></li> </ul> <h1>【B】修正版サンプル　"border-collapse: separate;"</h1> <table class="hoge2" cellspacing="0" cellpadding="0" border="0" summary="概要"> <tr> <td class="b" id="hoge2_data1">データ1</td> <td class="b" id="hoge2_data2">データ2</td> </td> </tr> </table> <ul> <li><button type='button' onclick='delLine("hoge2_data2");'>右セル枠線だけを消す</button></li> <li><button type='button' onclick='delLine("hoge2_data1"); delLine("hoge2_data2");'>左右セル枠線を消す</button></li> </ul> </body> </html> --------------------------------------------------------------------- 【A】から【B】への修正については以下の2つのポイントがあります。 collapseからseparateに変更した場合、そのままでは（セルの内部ではなく）セルとセルとのボーダー間隔が空いています。この間隔を調整する為にborder-spacingというプロパティが用意されているのですが、メジャーなブラウザの中でもIEだけがこれを実装していない為、このプロパティで表示結果の足並みを揃える事ができないという実情があります。で、打開策ですが、table要素のcellspacing属性が同様の機能を果たす為、そちら（HTML側でtableにcellspacing属性を0と記述する事で）で代用しています。また、separateを採用して分離モデルとなっている場合、隣接する枠線も別個に存在する為、本件であれば”左セルの右枠線”と”右セルの左枠線”のみだぶって表示される事になります。これを取り除く為、idセレクタで”左セルの右枠線”を最初から非表示にしておきます（td#hoge2_data2 { border-left: none; }　の箇所です）。これで、表示結果はcollapseの場合と同様になります。

質問者

お礼 2009/03/04 00:08

abrilさんサンプルコードまで提示して頂き、大変感謝致します。なんとか、この方式で乗り切ろうと思います。有難うございました。

その他の回答 (6)

abril
ベストアンサー率69% (388/560)

2009/03/03 18:32 回答No.7

ANo.3-5です。連続ですみません…ANo.4にもう一箇所説明部分に記述ミスがありました。【誤】”左セルの右枠線”を最初から非表示にしておきます（td#hoge2_data2 { border-left: none; }　の箇所です）。 ↓ 【正】”右セルの左枠線”を最初から非表示にしておきます（td#hoge2_data2 { border-left: none; }　の箇所です）。逆ですね。重ね重ね失礼しました。

abril
ベストアンサー率69% (388/560)

2009/03/03 18:28 回答No.6

ANo.3-4です。すみません、ANo.4にて記述ミスがありましたので訂正しておきます。データ2</td> </td>←このtdは不要です。失礼しました。

rukuku
ベストアンサー率42% (401/933)

2009/03/03 14:20 回答No.5

＃２のrukukuです。 >２番目の列の「左側」のborderが表示されているのか >どうかは知識不足の為、判断できません。ごめんなさい「１番目の列」の「右側」のborderの誤りです。スタイルシートの部分を下記のようにして、 <style TYPE="text/css"><!-- table.tclass { border-collapse:collapse; border: 2px solid; border-color: #0000FF; } td.b { border: 1px solid; border-right-color:#FF0000; border-left-color:#00FF00; } td.w { border:none; } テーブルに <td class="b" id="td3">Table3</td> を追加してテストしてみてください。青：テーブルの枠赤：セルの右側緑：セルの左側になります。これでテストしてみた感じでは、 border-collapse:collapse; では、上下の枠線はテーブル、左右の枠線は左側のセルの設定が優先されているようです。（スクリプトの実行結果はFireFoxとIEで異なります。）この辺は、FireFoxやIEの「仕様」と言うしかないと思います。

質問者

お礼 2009/03/04 00:15

rukukuさんご回答ありがとうございます。なるほど、枠線には優先順位があるのですね。大変勉強になりました。

abril
ベストアンサー率69% (388/560)

2009/03/02 22:51 回答No.3

> また、ご指摘の最初から > <td class="b" id="td1">Table1</td> > <td class="w" id="td2">Table2</td> > だった場合は問題なく、 > ┌-┐ > └-┘ > 表示されます。こちらでも試してみましたが、そうなりますね。ということは、通常の状態であればFirefoxでもCSSでのスタイルが他の環境での描画と同じになるわけですから、「ブラウザに依るCSSの解釈違い」という事にはならないと思います。「ブラウザに依るJavaScriptの不具合」という事の様に思われるのですが… あいにくJavaScriptに関しては詳しくはないので断言はできませんが、同様にclassNameを使用してclassの差し替えを行うサンプルスクリプトを2,3ピックアップして本件の例に当てはめてみましたが、セルのボーダーの描画、という事に関してはいずれも全く同じ不具合が発生しました。背景色や文字色などは問題なく切り替わる様なのですが… もしかしたらJavaScriptを改良すれば解消される不具合かもしれませんのでJavaScriptカテで再度質問されてみた方が宜しいかも… ちなみに、質問者様もお気づきの通り、現在のJavaScriptのままでも、"border-collapse: collapse;"をあきらめて値をseparateに変更（＝ディフォルト）にすれば簡単に解決する問題ですが、それではどうしてもいけませんか？separateでも、tdのidセレクタを利用してborderプロパティの指定の仕方を工夫すれば、見た目はcollapseの場合と同じにする事が可能ですが…

質問者

お礼 2009/03/03 01:58

abrilさんご回答ありがとうございます。 border-collapse: collapseに拘っているわけではありませんが、知識不足のため、separateで見た目をcollapseにする事ができません。いろいろ試してみようと思いますが、もし何か良い方法がありましたらお教え頂けると助かります。

rukuku
ベストアンサー率42% (401/933)

2009/03/02 20:17 回答No.2

はじめまして＞おっしゃるとおり＞┌-┬-- ＞└-┴-- ＞なってしまいます。＞<td class="b" id="td1">Table1</td> ＞<td class="b" id="td2">Table2</td> CSSの解釈はブラウザによって若干ちがうのでやっかいです。もしかしたら、FireFoxでは２番目の列の「左側」のborderが表示されていませんか？ td1、td2で設定されているスタイルが分からないので、検証はできませんが。

質問者

お礼 2009/03/03 01:53

rukukuさんご回答ありがとうございます。 border-collapse:collapseにしているので、２番目の列の「左側」のborderが表示されているのかどうかは知識不足の為、判断できません。因みにtd1,td2は質問文で掲示しているスタイル以外は設定していません。

askaaska
ベストアンサー率35% (1455/4149)

2009/03/02 14:07 回答No.1

> 右側セルの右枠だけ消えて、残りの枠は表示されたままになります。 ┌-┬-- └-┴-- こうなっちゃうってことかな FireFox入れていないので確認できないのでアレだけど。 border:noe; がいけないとか？正しくは border:none; だと思うけど。あとあと、ふと思ったことは <td class="b" id="td1">Table1</td> <td class="b" id="td2">Table2</td> が最初から <td class="b" id="td1">Table1</td> <td class="w" id="td2">Table2</td> だった場合どうなるのかしら。やっぱり ┌-┬-- └-┴-- になるの？なるのならFireFoxの描画上の障害だし、そのときは ┌-┐ └-┘ になるならFireFoxの描画上の障害だろね。最悪背景色と同じ色で描画することも考慮した方がいいかも。

質問者

お礼 2009/03/02 14:34

おっしゃるとおり ┌-┬-- └-┴-- なってしまいます。 border:noe; はこちらへの転記ミスです。 border:none;でも問題が発生してしまいます。また、ご指摘の最初から <td class="b" id="td1">Table1</td> <td class="w" id="td2">Table2</td> だった場合は問題なく、 ┌-┐ └-┘ 表示されます。また、 td.w { border: 1px solid; border-color:#FFFFFF; } として、背景色の白で枠を再描画も検討しましたが、やはり結果は ┌-┬-- └-┴-- のように右枠のみ白に再描画されました。

関連するQ&A

枠線が表示されません
初歩的な質問ですみません。以下のようなテーブルを組んでいるのですが枠線が表示されません。どこがおかしいのでしょうか？宜しくお願いします。 ==================================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
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> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td class=none> </td><td td class=none> </td><td class=none> </td><td class=none> </td></tr></tbody> </table> </BODY> </HTML> 何か対策は無いでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
Firefoxを使ってるのですがズームするとTableの線（ボーダー）が消えてしまいます！
他のページにも投稿したのですが、どうも質問した場所が違ってたようなので、もう一度ここで質問し直させてください。お願いします。 Firefoxを使ってるのですがズームするとTableの線（ボーダー）が消えてしまいます！同じTableを3パターンのズーム度でアップしました。 http://i800.photobucket.com/albums/yy282/nothingspecialda/tanuki.jpg 左は問題無いのですが、真ん中と右はTableの線が一部消えてしまってます。ちなみにここの質問一覧ページもズームすると枠線が消えたりします。 http://oshiete1.goo.ne.jp/205/c709.html ちなみにIE8でも似たような現象がありました！何が原因でしょうか？どうすれば改善するでしょうか？アドバイスお願いします。サンプルTableのHTMLとCSSを書いておきます。 ☆HTML <table> <tr> <td>たこ焼き</td> </tr> <tr> <td>たこ焼き</td> </tr> <tr> <td>たぬき</td> </tr> <tr> <td>たぬき</td> </tr> <tr> <td>ほうれん草・ピーマン</td> </tr> <tr> <td>ほうれん草・ピーマン</td> </tr> </table> ・CSS tr, td {border:1px solid black;} table{text-align:center; border-collapse:collapse;}
- 締切済み
- HTML
<table>のclass指定が継承されない
<table>に指定したclass指定が、その下の<td>や<tr>に継承されずに困っています。 HTMLを <table class="sample"> <tr> <td>1-1</td> <td>1-2</td> </tr> <tr> <td>2-1</td> <td>2-2</td> </tr> </table> とし、 cssを table, td { border: 2px #2b2b2b solid; } とした場合、新しくhtmlとcssを作ると表自体と全セルに囲み線が作られます。ですが、今運営しているHPに記述すると、<table>のborderのみしか表示されません。試しに、<td>にclassを指定しなおしてみると、そのセルにも囲み線が表示されました。全<td>にclassを指定すれば問題ないのかもしれませんが、それではあまりにも使い勝手が悪いため、何とかhtmlは<table>のみにclassを指定することで全セルに反映させたいと思っています。考えられる原因としてはどのようなものがありますでしょうか…？
- ベストアンサー
- CSS
テーブルの枠線の色を指定したい。
http://www.kanzaki.com/docs/html/htminfo16.html を参考に、 --------------------------------------- <table> <tr> <td>りんご</td> <td>甘酸っぱい</td> <td>おおむね赤</td> </tr> <tr> <td>なつみかん</td> <td>かなり酸っぱいと思う</td> <td>たいてい黄色</td> </tr> </table> --------------------------------------- と言うテーブルに対して、 --------------------------------------- <style> table { border-collapse: collapse; } td { border: solid 1px; padding: 0.5em; } </style> --------------------------------------- と記述して、枠線を付けたのですが、枠線の色を指定する事は出来ますか？赤にしたいです。ご回答よろしくお願いします。
- ベストアンサー
- HTML
CSSでTRに枠線とTDに背景を指定したい。
CSSでTRに枠線種を指定、TDで背景色を指定したいのですが、 Firefoxでは思惑通り表示されますが、IEではTRの枠線が表示されません。何か良い対応策は無いでしょうか？ == CSS == TABLE { border-collapse: collapse; } .grid { border: solid 1px; border-color: #888; } .nogrid { border: none; } .title { background-color: #ff7; } .data1 { background-color: #eef; } .data2 { background-color: #fff; } == HTML == <table> <tr class="grid"> <td class="title">項目１</td> <td class="title">項目２</td> <td class="title">項目３</td> </tr> <tr class="nogrid"> <td class="data1">値１</td> <td class="data1">値２</td> <td class="data1">値３</td> </tr> <tr class="nogrid"> <td class="data2">値１</td> <td class="data2">値２</td> <td class="data2">値３</td> </tr> </table>
- 締切済み
- HTML
cssでテーブルで細い線
スタイルシートを使って 1ピクセルの細い線にしようと、サンプルのように以下のようにしてみましたが中の線（td？）が二重になってしまいます一線にするのにどのようにすればイイですか？ ―――――――― .table2 { width: 400px; /* テーブルの横幅 */ border-collapse: collapse; /* 枠線の表示方法 */ border: 1px #1C79C6 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ background-color: #FFFFFF; /* 背景色 */ } .table2 TD { border: 1px #1C79C6 collapse; /* セルの枠線（太さ・色・スタイル） */ } ―――――――――――――― <TABLE CLASS="table2"> <TR> <TD>WebデザインA</TD> <TD>WebデザインB</TD> </TR> <TR> <TD>WebデザインC</TD> <TD>WebデザインD</TD> </TR> </TABLE>
- ベストアンサー
- 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 {border:1px solid red;} table tr {border:1px solid red;} table th {border:1px solid red;} table td {border:1px solid red;} </style> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=1 cellspacing=1 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=0 cellspacing=0 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> このソースだと、テーブルならすべて枠線が付いてしまいます。特定のテーブルのみ赤枠ではなく、白にして色を消したいのですがどうすればいいですか？
- ベストアンサー
- CSS
CSSの部分リセットについて
サイト全体に影響するCSSでtableのボーダーを非表示に指定しています。ところが、一部分のみCSS無指定状態のtableを表示する必要が出てしまいました。該当するtableに別クラスを割り当てて、その部分だけを個別に指定しようと思いましたが、実際見てみると、CSS無指定状態とは微妙に見た目が異なってしまいます。＝＝＝＝CSS内容＝＝＝＝ table { border: 0px none; } td { border: 0px none; border-collapse: collapse; } /*普通にtableを書くとボーダーが消えてしまうので個別に指定*/ .reset table{ border: 3px ridge; } .reset td{ border: medium ridge; border-collapse: collapse; } ＝＝＝＝HTML＝＝＝＝ <div class="reset"> <table> <tr> <td>ああああああ</td> <td>ああああああ</td> </tr> <tr> <td>いいいいいい</td> <td>いいいいいい</td> </tr> </table> </div> 元のtableの指定はサイト全体に影響が出てしまうため、修正することができません。いまさらながらものすごく後悔していますが・・・。また、今後の使いまわしを考えると、IDの指定もできません。無理矢理何とかできないかと思い、上記の方法を取りましたが、やはりうまくいきません。理想としては、指定した箇所のみCSSの影響がなくなるということですが、いろいろ調べても見つかりませんでした。根本的に作り直しした方がいいのは理解していますが、何か方法があればと思い質問させていただきました。どなたか良い案がありましたらお助けください。
- ベストアンサー
- HTML

FireFoxでのtable枠線の表示/非表示