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

  • 公開日2014/05/10
  • HowTo

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の設定してくださいね!!

Google AdS



関連記事

WordPressのデータベースのテーブル接頭辞を、phpMyAdminで変更する方法


最近サーバーを変更してWordPressの引っ越しをしたのですが、引っ越し前のサーバーの初期設定でWordPressのデ…

記事を読む▷


公開日を最終更新日にする!サムネイル

検索結果に最終更新日を表示させてクリック率をアップする方法!新規投稿時には公開日を表示させる!


以前は検索結果で1ページ目上位3番目以内に半年以上表示されていた記事が、いきなり圏外となってしまいました。Googleの…

記事を読む▷


XSERVER『サーバーパネル』の画面

共有用FTPアカウントの作り方:XSERVERにて


今までサーバーは管理する側、作業も依頼されてする側だったので、これといって気にしたことはなかったのですが、いざこちらから…

記事を読む▷


SNS等の公式ロゴ(アイコン)素材のまとめ(Facebook, Instagram, Youtube, Twitter, Line etc.)


一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ(アイコン)』だと思うのですが、サイト…

記事を読む▷


IcoMoonにSVGファイルをインポート

IcoMoonでSVGスプライトを作ってSVGアイコンを使う方法:WordPress & html での設定方法


今までSVGアイコンはきちんと把握せず使ってきたので、少々トラブルがあっても『頻繁に使う訳ではないし、とりあえず使えてた…

記事を読む▷


Comment

  1. 佐々 より:

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

    • JUN より:

      佐々さん

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

佐々 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

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

PAGE TOP