Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法

LINEで送る
Pocket

Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからない。要するにFirefoxのバグのようですね。

なので、↑のようにその消えるborder部分が現れた時は、その消えた部分のthやtdに直接borderを記述したりして対処していましたが、ちょっと驚き?の解決法を発見したので、ご紹介します。もしかしたら基本的な、普通の事かもしれませんが。。

バナー468-80_iPad-MacBook

解決方法!

さて。その解決法はこれです。
例として 行2 × 列3 くらいの簡単なTableを書きます。
(見やすいように、padding等、設定してます。)

Firefox 消えるborder 対策
なんで消えるの? それは バグです。。
<table class="FireFox_BorderTest">
  <tr>
    <th>Firefox</th>
    <th>消えるborder</th>
    <th>対策</th>
  </tr>
  <tr>
    <td>なんで消えるの?</td>
    <td>それは</td>
    <td>バグです。。</td>
  </tr>
</table>

↑どう見えてるでしょう?大丈夫の時もありますが、たまにやっぱり見えません。。
今もFirefoxでチェックしたら左と下が消えてます。なんでやねん。。

そう言う時は、このhtmlに下記のcssを追加すると、

.FireFox_BorderTest{/*tableの背景を黒にします。これがborderの色になります。*/
  background-color:#000000;
  border-collapse:separate;
  border-spacing:1px;
}
.FireFox_BorderTest tr td {/*tdの背景を白にします*/
  padding: 5px 20px;
  background-color: #fff;
}

このように、1pxのボーダーが完璧に消える事なく書く事ができます。
Tableの背景を黒に、tdの背景を白にする事で、
1pxのborder(solid、色は黒)を表示させる、いう設定をしたわけですね。

Firefox 消えるborder 対策
なんで消えるの? それは バグです。。

どうです?簡単でしょ?これ発見した時は久しぶりに感動しました。

でも難点もあります。これ、solid以外のborderには使えないんです。原理が分かれば普通に考えて無理ですよね。
なので、solid以外に設定したい時は、その設定したい部分に、直接borderの設定してくださいね!!



関連記事

opacityの書き方 クロスブラウザ


今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…

記事を読む▷


WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


サーバー移転の手順 その3:移転後のトラブル


前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…

記事を読む▷


これは便利!!WordPressの投稿内に、管理者やログインユーザーにしか見れないメモを残す方法


よく投稿を途中まで作って、なかなか仕上げれずに長い期間あいてしまうと『これなんのサイト参考にしてたんやっけ?』とか『え〜…

記事を読む▷


[http] から [https] へ。常時SSL化対応:ワードプレス、エックスサーバー環境にて


今更ですが、、、SSL化対応することにしました。 Googleが『SSL化されたWebサイトはランキング評…

記事を読む▷


スマホ、携帯からタップ(クリック)で電話を発信する、htmlの記述方法 コピペでOK!!


スマホ等のタブレット、また携帯で、電話番号をタップ(クリック)して直接かけるhtmlの記述方法です。 …

記事を読む▷


wordmork.itの画像3

wordmark.it でフォントを選ぶ方法


フォント選びって結構大変ですよね。使用するフォントによって、そのサイトなりデザインの印象が変わってくるので、色選びもそう…

記事を読む▷


resolution-list_00

【2019最新】スマホ・タブレットの解像度一覧表(画面サイズの割合)


最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方が少なくなってきましたが、そのページごとにブレ…

記事を読む▷


no image

テキスト、画像を選択できなくする方法


facebookで『続きを読みたかったらいいねを教えてね!』みたいな記事がよくありますが、必ずそういう記事に限ってコピペ…

記事を読む▷


複数の横に並ぶブロック要素をセンタリングさせる!!


よく複数の画像をfloatで並べることありますよね?でも、それを括ったDivタグとかをセンタリングしようとしたら、なかな…

記事を読む▷


Comment

  1. 佐々 より:

    抜いて形だす技法ですよねー(/・ω・)/

    • JUN より:

      佐々さん

      ですね!
      発見したときはこういう発想がなかったので、
      ちょっと感動したのを覚えてますw

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

参考にさせていただいてるサイト

PAGE TOP