【html/CSS】tableやtrのborder(枠線)が表示されない原因6選

「tableの一部の線が表示されてない!?なんで!?」

tableのborderが一部・全部表示されない原因を6つ紹介します。

【原因1】ブラウザの拡大縮小

ブラウザの拡縮が100%でないときtableのborderの一部が表示されなくなることがあります。

Ctrl++で拡大、Ctrl+-で縮小します。

気付かないうちに間違って押していることもあります。

拡縮を100%にすると直ります。

Ctrl+0で拡縮率を100％にできます。

chromeで拡縮が100%以外の時、URLバー内の右側に虫眼鏡アイコンが表示されます。

これをクリックして「リセット」を押しても100%にできます。

IEではAlt>表示>拡大で拡大率を確認できます。

【原因2】borderの指定ミス

tableはhtml属性borderを指定しないと線は表示されません。

NG

<table>

OK

<table border="1">

ただし、CSS側でborderを指定している場合、CSSが優先されます。

そしてこのCSSのborderも注意です。

borderを指定するときsolidの指定を忘れると線が表示されません。

NG

border:#333 1px

OK

border:solid #333 1px

solidを指定しない場合、線の種類は「none」つまり非表示になります。

【原因3】border-collapseの設定

border-collapseはtableとtdの線を離すか共有するか指定するCSSです。

border-collapse: collapseだと線が共有となります。

border-collapse: separateだと線が離れます。

border-collapse: collapseを設定している場合、separateにしてみて線が表示されるか確認しましょう。

【原因4】trにCSSを指定している

行を示すhtmlタグであるtrはCSSの指定が想定されていません。

実際CSSを指定すれば効くこともありますが、他のCSSを併用したときに効かなくなることもあります。

ミスの元となるためtrにCSSは指定せず、tdにCSSを指定しましょう。

【原因5】押し出されて隠れている

tableの外側にoverflowを指定された親要素があり、tableの横幅+margin-leftがその親要素より大きいとき右側が隠れてしまうことが考えられます。

親要素にoverflowが指定されていないか確認しましょう。

【原因6】背景色を印刷しない設定

印刷時だけ線が表示されないときはこちらです。

印刷では背景色を印刷しない、という設定ができます。

tableの線をborderではなくbackgroundで線のように見せているとき、印刷時表示されなくなる場合があります。

自分だけの問題なら背景色を印刷する設定にしてプレビューを確認してみましょう。

自分がサイト作成側ならCSSを直しましょう。

borderを指定すると印刷設定では消えません。

【まとめ】tableのborderが一部・全部表示されない原因

【原因1】ブラウザの拡大縮小

Ctrl+0で拡縮率を100%にする

【原因2】borderの指定ミス

CSS borderにはsolidと線幅を必ず指定する

【原因3】border-collapseの設定

border-collapse: collapseを設定している場合、separateにしてみる

【原因4】trにCSSを指定している

trにCSSは指定せず、tdにCSSを指定

【原因5】押し出されて隠れている

親にoverflowが指定されていないか確認

【原因6】印刷時表示されないとき

backgroundではなくborderを使う

以上、tableのborderが一部・全部表示されない原因6選でした。