たきゃはしです

もう日常ブログにしよう

Tableタグで角丸『border-radius』(CSS3)が使えるのか検証→可能

HTML CSS


CSS3の角丸、記述がむちゃくちゃメンドイけど可愛い〜！
今度、テーブルで使いたいなぁ〜と思いまして、テストしてみました。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>テーブル角丸テスト</title>
<style type="text/css">

table.radius {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	font-size: 12px;
	color: #fff;
	padding: 5px;
	background: #000;
	zoom: 1;
}

table.radius tr th,
table.radius tr td {
	padding: 10px;
}

table.radius tr th {
	background: #090;
}

table.radius tr td {
	background: #36f;
}

</style>
</head>
<body>

<table width="500" class="radius" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <th>角丸テスト</th>
        <td>IEは対応してないよ</td>
    </tr>
    <tr>
        <th>角丸テスト</th>
        <td>IEは対応してないよ</td>
    </tr>
    <tr>
        <th>角丸テスト</th>
        <td>IEは対応してないよ</td>
    </tr>
    <tr>
        <th>角丸テスト</th>
        <td>IEは対応してないよ</td>
    </tr>
</table>

</body>
</html>


Firefox3.6、Google Chrome 8は問題なく表示されました。
Opera、Safariは試してないけどおそらく問題ないはず。


結果が見えてるので、IE8(CSS3非対応)は試してません。笑