【Arkhe】テーブルの角を丸くする

.access_table th,
.access_table td{
  vertical-align: middle;
}


.access_table table{
  border-collapse: separate;
  border-spacing: 0;
  border: none;
}

/* セルの上と左に線を引き、各行の最後などは右と下にも線を引く */
.access_table tbody th,
.access_table tbody td{
    border:1px solid var(--ark-color--border--table);
    border-right:none;
    border-bottom:none;
}
.access_table tbody tr th:last-child ,
.access_table tbody tr td:last-child {
    border-right:1px solid var(--ark-color--border--table);
}
.access_table tbody tr:last-child td {
    border-bottom:1px solid var(--ark-color--border--table);
}

/* テーブルの最初の行の最初と最後、最後の行の最初と最後に角丸 */
.access_table tbody tr:first-child td:first-child {
    border-radius: 10px 0 0 0 ;
}
.access_table tbody tr:first-child td:last-child {
    border-radius: 0 10px 0 0 ;
}
.access_table tbody tr:last-child td:first-child {
    border-radius:  0 0 0 10px ;
}
.access_table tbody tr:last-child td:last-child {
    border-radius: 0 0 10px 0 ;
}

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次