角の丸いテーブルを表示するには

画像を用いず、CSS3 のみでテーブルの角を丸くします。テーブルの中の子テーブルに影響しないよう、> を用いて自テーブルの th, td のみにスタイルを適用しています。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Round Table</title>
<style>
.round-table {
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 6px;
}
.round-table > tbody > tr > td,
.round-table > tbody > tr > th {
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}
.round-table > tbody:first-child > tr:first-child > th:first-child,
.round-table > tbody:first-child > tr:first-child > td:first-child {
    border-top-left-radius: 5px;
}
.round-table > tbody:first-child > tr:first-child > th:last-child,
.round-table > tbody:first-child > tr:first-child > td:last-child {
    border-top-right-radius: 5px;
}
.round-table > tbody:last-child > tr:last-child > th:first-child,
.round-table > tbody:last-child > tr:last-child > td:first-child {
    border-bottom-left-radius: 5px;
}
.round-table > tbody:last-child > tr:last-child > th:last-child,
.round-table > tbody:last-child > tr:last-child > td:last-child {
    border-bottom-right-radius: 5px;
}
th {
    background-color: #ddf;
    width: 100px;
}
td {
    background-color: #fff;
}
</style>
</head>
<body>
<table class="round-table">
  <tr><th>山田</th><th>田中</th><th>鈴木</th></tr>
  <tr><td>42</td><td>38</td><td>26</td></tr>
</table>
</body>

Sample

山田	田中	鈴木
42	38	26

ただし上記は、thead, tfoot を使用しない場合のみ利用可能です。tfoot は tbody よりも前に記述されるケースもあるため、これらに対応するには JavaScript を使用する必要があります。上記の例と同様、角丸にしたいテーブルに class="round-table" を指定してください。

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
    $(".round-table").each(function() {
        var color = '#999';
        var radius = 4;
        var trs = $.merge($.merge(
            $(this).children("thead").children("tr"),
            $(this).children("tbody").children("tr")),
            $(this).children("tfoot").children("tr"));
        trs.first().children("th, td").first().css('border-top-left-radius', radius + 'px');
        trs.first().children("th, td").last().css('border-top-right-radius', radius + 'px');
        trs.last().children("th, td").first().css('border-bottom-left-radius', radius + 'px');
        trs.last().children("th, td").last().css('border-bottom-right-radius', radius + 'px');
        $(this).css({
            'border-top': '1px solid ' + color,
            'border-left': '1px solid ' + color,
            'border-collapse': 'separate',
            'border-spacing': '0',
            'border-radius': (radius + 1) + 'px'
        });
        trs.children("th, td").css({
            'border-right': '1px solid ' + color,
            'border-bottom': '1px solid ' + color,
        });
    });
});
</script>