border-radius が効かない時に試したこと

SC2 2019-05-11

2021-08-17

このサイトを検索 | Search this site

テーブルの四隅を丸くするために、<table>タグに border-radius プロパティを使用したクラス名を設定していますが、私の作成したCSSは右下の角が丸くなっていないことに気がつきました。

現在は修正していますが、以下の画像は右下の角が切れている時のスナップショットです。

試行錯誤したところ、右下の角を丸くすることができたので私が記述したCSSをメモに残します。

結論としては、疑似クラス nth-child を使用して右下の td要素に border-radius プロパティを重複設定します。

右下が丸くなるCSSもあるが・・・

table要素のクラス名を複数作成して利用していますが、その中のいくつかは右下が丸くなるものもあるので、そのCSSを改造すればいいのだろうけど簡単に解決する方法を見つけたのでそちらを採用しました。

border-collapse: collapse; を指定すると枠線が一部表示されなくなったので、border-collapse: separate; を指定しています。

table.radius {
border-collapse: separate;
border-radius: 5px;
}

一番最後の行の一番右のtd要素の指定方法は次の通りです。
疑似クラス last-child を指定しています。

.radius tr:last-child td:last-child {
border-bottom-right-radius: 5px;
}

実際に使用しているCSS

このブログで使用しているCSSを転載します。

後述するクラス名を使用すると以下のような比較表が出来上がります。

dsheet-comp-th
モデル名	Xperia X Compact SO-02J	Essential Phone PH-1
背面カメラ静止画	2300万画素裏面照射積層型CMOSイメージセンサー Exmor RSR for mobile 23MP（4:3）/ 20MP（16:9）/ 8MP（4:3）/ 8MP（16:9）/ 3MP（4:3）/ 2MP（16:9）フラッシュ、ジオタグ、スマイルシャッター、シーン認識撮影	13MP ＋ 13MP (Dual RGB + Mono) 13MP True Monochrome モード f/1.85 4128 x 3096 Pixels Hybrid autofocus Phase Detection autofocus Laser autofocus Continuos Shooting High Dynamic Range mode (HDR)
背面カメラ動画	フルHD（1080p）/ HD（720p）/ VGA（480p）ライト、顔認識、手ブレ補正、セルフタイマー、タッチ撮影、オートフォーカス	3840 x 2160 @ 30 fps 1920 x 1080 @ 60 fps 1280 x 720 @ 120 fps

Xperia X Compact SO-02Jを Android 8.0 にアップデートした時のセキュリティパッチの情報など｜SO-02JとEssential PH-1の仕様比較表 :Scrap 2nd.

CSSコードは以下の通りです。

比較表に最適化しているので、2列目以降のセル幅は均等表示になります。

先の比較表を見てもらうとわかりますが、1行目を見出しとして利用したい時は dsheet-comp-th を設定します。

<th></th>を使用するとCSSコードが長くなるので、全て<td></td>を使用する設計にしています。

.dsheet-comp-th

table.dsheet-comp,
table.dsheet-comp-th {
table-layout : fixed;
width : 98%;
overflow : hidden;
border-collapse : separate;
border-spacing : 0px;
border : 1px solid #aaa;
border-radius : 5px;
margin : 2em auto;
}
.dsheet-comp caption,
.dsheet-comp-th caption {
caption-side : bottom;
text-align : right;
margin-top : 4px;
}
.dsheet-comp td,
.dsheet-comp-th td {
vertical-align : top;
padding : 6px;
border-bottom : 1px dotted #aaa;
border-left : 1px dotted #aaa;
}
.dsheet-comp tr:last-child td,
.dsheet-comp-th tr:last-child td {
border-bottom : 0px;
}
.dsheet-comp tr:last-child td:last-child,
.dsheet-comp-th tr:last-child td:last-child {
border-radius : 5px;
}
.dsheet-comp td:first-child,
.dsheet-comp-th td:first-child {
width : 6em;
white-space : pre-line;
border-left : 1px;
background-color : rgba(132,132,132,.05);
}
.dsheet-comp-th tr:first-child td {
background-color : rgba(65,105,225,.15);
border-bottom : 1px solid #aaa;
vertical-align : middle;
font-weight : bold;
text-align : center;
}
.dsheet-comp td:nth-child(n+2),
table.dsheet-comp-th tr:nth-child(n+2) td:nth-child(n+2) {
background-color : white;
}

うまくいかない原因は？

tr:last-child td:last-child を使用しなくても右下が丸くなるCSSもあるので、原因はよくわかりません。

実際に使用しているCSSは、隣接するボーダーが重複する部分（外枠と内枠の接する部分）が太く表示される現象を解消するために border-left: 0px; などを指定しているので、そこらあたりの指定方法が間違っているのだと思います？

border-radius は一括指定する方法と個別指定する方法があります。

四隅を別々に指定する時は、次のプロパティを使用します。