CSSで表の罫線出そうとしたら点線と実線が混ざってどん詰まりした話

公開日: : 最終更新日:2015/11/25 プログラミング

デザイナーさんからもらったCSSをHTMLの表に適用したら、

IEで見た時だけなぜか枠線の一番下が点線になってしまい、

直そうとしたら思いの外詰まってしまった体験談です。

CSSはどの記述が優先されるのかと、ブラウザの挙動把握して書かないと怖いですね!

問題のCSS

今回問題になったCSSの一部を抜粋しました。

.main__mainTable {
border: 1px solid #d9d9d9;
}
.main__mainTable th,.main__mainTable td{
border-bottom: 1.1px dotted #b2b2b2;
}

これ、Chromeで見ると外枠線は実線、罫線は点線で綺麗に表示されるんですが、

IEで見たときはborder-bottomの定義が上書きされて、枠線の一番下が点線になってしまいました。

実際にはその他に色々(paddingとかmarginとか)定義されていたので、ここが怪しいと気づくまでに1時間も使ってしまいました…

後、表の罫線の指定方法色々ありますが、何が優先されてどういう解釈されるのかが分からず、調べ物に時間かけちゃったのもあります。

原因

このサイト様に知りたかったことがとても詳しく書かれていました!

http://www6.plala.or.jp/go_west/nextcss/ref/article/tbl_clps.htm

今回のように表の罫線に対する定義が重複した場合は、

ピクセルの太さであったり線の見やすさによって定義の優先度が決まるようです。(詳細は上記サイト参照)

そこでもう一度問題のCSSを見てみると

.main__mainTable {
border: 1px solid #d9d9d9;
}
.main__mainTable th,.main__mainTable td{
border-bottom: 1.1px dotted #b2b2b2;
}

border-bottom: 【1.1px】 dotted #b2b2b2;

これが原因でした。

borderの定義に比べて、0.1px太く定義されていたために

ブラウザで表示するときにこちらの定義を優先してしまっていた、という。

気づいてしまえばあっさり解決する問題でした。

定義を修正し、試しに1.0pxにして再確認したら

外枠線が全て実線になってくれて万事解決!

まとめ

CSSとかの挙動は環境によって異なるのと、

Chromeとかは上手く解釈して良いように表示してくれるので、こういう優先度とかを気にしないとダメな問題に出会えたのはある意味ラッキーでした。

デザイナーさんからもらったCSS当てただけなので自分自身は1行もCSS書いてないんですけどね!

ちなみに余談ですが、

今回からソースコードを記事上で綺麗に表示するWordPressのプラグイン導入しました。

SyntaxHighlighterというプラグインです。結構使い勝手いいので是非導入してみてください!

関連記事

no image

シェルスクリプトでtsvファイルとcsvファイルを処理する方法

シェルスクリプトでtsvファイルを要素ごとに配列に格納し、処理する方法です。 普通はcsvファ

記事を読む

no image

学生時代に1ミリも知らなかったJavaの開発風景

※この記事は、苫小牧高専 Advent Calendar 2016 - Adventar 9日目の記

記事を読む

スクリーンショット 2014-08-05 0.53.46

初心者のiOSアプリ(収支表)作成記。その1

iOSアプリ作成経験0の私が、収支表アプリを作ってみます。 ブログ書きながら勉強してるのでほと

記事を読む

no image

Java8のtimeパッケージのLocalTimeとLocalDateを触ってみた

ほんのりと仕事に出てきそうな匂いがあったので、 予習もかねてjava8のtimeパッケージを触

記事を読む

no image

bashにおける角括弧”[]“の扱いで困ったこと

あるShellScriptでパスワードを乱数生成するときに   $ cat /

記事を読む

no image

chromeで「このウェブページにアクセスできません」が出たときの対処法

自宅以外の環境でchrome使おうとして、検索した瞬間に「このウェブページにアクセスできません」と出

記事を読む

no image

javaでzip作る時の圧縮レベルの話

いわゆる無圧縮zipファイルをjavaで作ることがあったので、覚え書きです。 ついでに圧縮レベ

記事を読む

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

no image
学生時代に1ミリも知らなかったJavaの開発風景

※この記事は、苫小牧高専 Advent Calendar 2016 -

no image
gitbucketで再起動に失敗してDBエラーが起きた話

とあるAdvent calendarを書くことになったのですが、そもそ

no image
機械学習について簡単におさらいした

機械学習について、実際あんまりよくわかってなくね?ってなったので

no image
svnを使っている作業場でgitを普及させるためにやったこと

今回は、ある作業場でgitを普及させたい!という思いから、私が個人的に

no image
jenkinsのジョブでIllegalArgumentExceptionが起きた

Jenkinsのジョブで、 java.lang.IllegalArgu

→もっと見る

PAGE TOP ↑