【CSS】Rounded Table Corners using only CSS

title	descr
t1	s1
t2	s2
t3	s3
t4	s4

純使用CSS製作圓角表格


用的屬性是 border-radius，所以我以為只要這樣

.MyTableArea table {
    border-radius: 7px;
}

天真

結果完全無效
實際上在表格呈現圓角的時候是要在個別的th、td裡面去設，有夠麻煩

.MyTable tr:first-child th:first-child {
 border-top-left-radius: 7px;
}

.MyTable tr:first-child th:nth-child(2) {
 border-top-right-radius: 7px;
}

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

.MyTable tr:last-child td:nth-last-child(2) {
 border-bottom-left-radius: 7px;
}

第一組樣式是第一列的第一個th
第二組是第一列的第二個th
第三組是最後一列的最後一個td
第二組是最後一列的倒數第二個td
湊起來剛好就是表格的四角。

範例還有一些不相關的東西，像分配欄寬的 colgroup 跟機偶數列變色的 tr:nth-child(even)
不過這些有興趣的人自己再去查吧。