CSS でテーブルの線を引くのは簡単です。下のようにすれば問題なく引けます。
table {
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid #000;
}でも角を丸くしようとしてもできません。論理的にこれだ！という引き方になっていないからです。そこで僕なりの解法です。下のようにすれば問題ありません。
table,
td,
th {
border-style: solid;
border-color: #000;
}
table {
border-collapse: separate;
border-spacing: 0;
border-width: 1px;
}
td,
th {
padding: 5px 10px;
border-width: 1px 0 0 1px;
}
tr:first-child td,
tr:first-child th {
border-top-width: 0;
}
td:first-child,
th:first-child {
border-left-width: 0;
}
thead + tbody tr:first-child td,
thead + tbody tr:first-child th {
border-top-width: 1px;
}
tfoot tr:first-child td,
tfoot tr:first-child th {
border-top-width: 1px;
}ここで角を丸くするには下のようにするだけです。
table {
border-radius: 10px;
}