CSSでレスポンシブなtableのborder（枠）を角丸にする方法

border-radiusを使ってtableを角丸にできます

角丸にするCSS「border-radius」はtableタグにも適用できますが、一つだけ条件があります。

それは、

「border-collapse: separate;」

であることです。
[adsense]

角丸なtableのサンプル

以下のような見た目のtableの表示方法を説明します。
レスポンシブでブレークポイントは「max-width:600px」にしています。

レスポンシブな角丸tableのコード

早速ソースコードです。

HTMLコード
<table class="table_radius mobile">
<thead><tr><th colspan="2">テーブルの見出しは2カラム</th></tr></thead>
<tbody>
<tr><td>左上のtd</td><td>右上のtd</td></tr>
<tr><td>左下のtd</td><td>右下のtd</td></tr>
</tbody></table>

CSSコード
.table_radius {
  color: #000000;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #666666!important;
  border-radius: 10px;
  background-color: #ffffff;
　overflow: hidden;
}

.table_radius thead th {
  padding: 10px;
  border-bottom: 1px solid #666666;
}

.table_radius tbody tr td {
  padding: 10px 15px;
}

.table_radius tbody tr td + td {
  border-left: 1px solid #666666;
}

.table_radius tbody tr + tr td {
  border-top: 1px solid #666666;
}

@media screen and (max-width:600px) {
table.mobile td{
  display: block;
  }

.table_radius tbody tr td + td {
  border-left:none;
}

.table_radius tbody tr > td + td{
  border-top: 1px solid #666666;
}
}

上記のコードをそのまま使えば、サンプルのようなtableができるはずです。

ただし、Wordpressの場合、テーマのstyle.cssでtableタグに何かしらの装飾がされている場合は、少し調整が必要です。

CSSの説明

.table_radius {
color: #000000;
border-collapse: separate;　/* 必ず「separate」にします。 */
border-spacing: 0;　/* 隣接するセルのborderの間隔を「0」にします。 */
border: 1px solid #666666!important;
border-radius: 10px;　/* 角丸具合を指定します。*/
background-color: #ffffff;
overflow: hidden;　/* 角丸にしてはみ出たbackgroundを非表示にします。 */
}

.table_radius tbody tr td + td {
border-left: 1px solid #666666;　/* ２列目以降のセルの左だけ枠線を表示します。 */
}

.table_radius tbody tr + tr td {
border-top: 1px solid #666666;　/* ２行目以降のセルの上だけ枠線を表示します。 */
}

@media screen and (max-width:600px) {　/* レスポンシブの指定です。 */
table.mobile td{
display: block;
}

.table_radius tbody tr td + td {　/* １列にするのでセルの左枠線を非表示にします。 */
border-left:none;
}
.table_radius tbody tr > td + td{　/* １行目の２列目以降のセルの上枠線を表示します。 */
border-top: 1px solid #666666;
}
}

WordPressで、このコードでもうまく表示されない場合は、こちらをご参照ください。

≫Wordpressのstyle.cssを部分的に無効にする方法