tableタグが角丸にならない問題に対処～意外なcssが原因でした～

2019年10月15日2020年1月9日

テーブルタグに線を引くことは、HTMLやCSSで日常的に行う操作になります。
今回、テーブルタグを「角丸」にしようと思ったところ、少々はまったため、解決方法を忘備録として記録いたします。

まずは、一般的なテーブル記述の方法

一般的なテーブルタグは、以下のようになります。

この辺は、そうは難しくありません。
さらに、ＣＳＳ（スタイルシート）で枠線を付けます。

tableタグの枠線の引き方は、いろいろありますが、私はtable タグに全体を囲う線を引き、th、tdタグに下線をつけます。最後th、tdタグだけ下線をなしにします。

その結果できたものがこちらです。

微妙に隙間ができています。
これは、tableタグのデフォルトボーダーの太さ分、セルとセルの間が離れているためです。

これを何とかするためには、tableのスタイルシートに、隙間を無くす記述を入れます。

「border-spacing」は、ボーダーの太さを指定します。
「border-collapse」は、隣接ボーダーを重ねるかどうか（隙間を詰めるかどうか）を指定します。

「collapse」は隙間を詰める
「separate」は隙間を開けるです。

この記述を加えて表示すると、以下のようになります。

隙間が埋まります。
あとは、角丸指定をtableタグのスタイルシートに加えればＯＫです。

実際に見てみると・・・・

あれ？角が丸くなっていません。
角丸指定を入れたのに、角が丸くなりませんでした。

原因は隙間を埋める「collapse」が角丸の邪魔をしていました。

tableタグのスタイルシートに追加した「border-collapse: collapse;」指定は、角丸指定があっても、角丸になりません。
ですので、以下の指定に変更します。

separate 指定は、隣接セルのボーダーをあける指定ですが、つめる指定だと、角丸分の隙間ごとつめてしまい、角丸にならないようです。

この指定で表示したものがこちらになります。

きちんと角丸テーブルになりました。

「border-collapse: collapse」を指定していないのに角丸にならない場合は

私の場合、「border-collapse: collapse;」を指定した覚えはないのに、角丸になりませんでした。

その場合、該当テーブルのスタイルシートに「border-collapse: separate;」を指定すればよいのです。

ただ、私の場合はリセットＣＳＳを用いていて、その中に「 border-collapse: collapse; 」が指定されていただけでした・・。

tableタグとは、奥の深いものだと改めて気づかされました。

---

ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。

関連記事