dポイントプレゼントキャンペーン実施中！

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

解決済

  • 質問者：coogon21
  • 質問日時：
  • 回答数：7件

下記HTMLコードは
テーブル(TDレベル)の枠線を表示するCSSクラスと
非表示とするCSSクラスを用意し、ボタンを押す事
によりjavascriptでCSSクラスを変更するものです。

<html>
<head>
<style TYPE="text/css"><!--
table.tclass {
border-collapse:collapse;
}
td.b {
border:1px solid;
border-color:#000000;
}
td.w {
border:noe;
border-color:#FFFFFF;
}
--></style>
<script Language="JavaScript"><!--
function delLine(elem){
var obj = document.getElementById(elem);
obj.className = "w";
}
// --></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では問題ありません。
何か対処方法をお分かりの方がおりましたらお教えください。
よろしくおねがいします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.4ベストアンサー

  • 回答者： abril
  • 回答日時：

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">
<!--
table.hoge1 {
border-collapse: collapse;
}
table.hoge2 {
border-collapse: separate;
}
td.b {
border: 1px solid #000;
}
td.w {
border: none;
}

td#hoge2_data2 {
border-left: none;
}
-->
</style>
<script type="text/javascript">
<!--
function delLine(elem){
var obj = document.getElementById(elem);
obj.className = "w";
}
// -->
</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の場合と同様になります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/03/04 00:08

No.7

  • 回答者： abril
  • 回答日時：

ANo.3-5です。

連続ですみません…ANo.4にもう一箇所説明部分に記述ミスがありました。

【誤】”左セルの右枠線”を最初から非表示にしておきます（td#hoge2_data2 { border-left: none; }　の箇所です）。
↓
【正】”右セルの左枠線”を最初から非表示にしておきます（td#hoge2_data2 { border-left: none; }　の箇所です）。

逆ですね。重ね重ね失礼しました。
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： abril
  • 回答日時：

ANo.3-4です。


すみません、ANo.4にて記述ミスがありましたので訂正しておきます。

データ2</td>
</td>←このtdは不要です。

失礼しました。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： rukuku
  • 回答日時：

＃２の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の「仕様」と言うしかないと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/03/04 00:15

No.3

  • 回答者： abril
  • 回答日時：

> また、ご指摘の最初から


> <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の場合と同じにする事が可能ですが…
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/03/03 01:58

No.2

  • 回答者： rukuku
  • 回答日時：

はじめまして



＞おっしゃるとおり
＞┌-┬--
＞└-┴--
＞なってしまいます。

＞<td class="b" id="td1">Table1</td>
＞<td class="b" id="td2">Table2</td>

CSSの解釈はブラウザによって若干ちがうのでやっかいです。
もしかしたら、FireFoxでは２番目の列の「左側」のborderが表示されていませんか？

td1、td2で設定されているスタイルが分からないので、検証はできませんが。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/03/03 01:53

No.1

  • 回答者： askaaska
  • 回答日時：

> 右側セルの右枠だけ消えて、残りの枠は表示されたままになります。


┌-┬--
└-┴--
こうなっちゃうってことかな

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の描画上の障害だろね。
最悪背景色と同じ色で描画することも考慮した方がいいかも。
    • good
    • 0
    • 件
通報する
この回答へのお礼

おっしゃるとおり
┌-┬--
└-┴--
なってしまいます。

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;
}
として、背景色の白で枠を再描画も検討しましたが、
やはり結果は
┌-┬--
└-┴--
のように右枠のみ白に再描画されました。

通報する
お礼日時：2009/03/02 14:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報