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タグとは、奥の深いものだと改めて気づかされました。