HTMLのテーブルの各セルを角丸にしたいのですが、角丸の画像を使わずにCSSやJS(jQueryとか)だけでできないでしょうか?例えば以下サイトでは、画像とそれを表示するセルが必要ですが、もっと簡単にできないものかと。よろしくお願いします。

http://zumirin.cool.ne.jp/kowaza/table.htm

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/12/10 22:45:59
  • 終了:2011/12/17 22:50:02

回答(2件)

id:satoxu No.1

satoxu回答回数94ベストアンサー獲得回数142011/12/10 22:59:53

ポイント50pt

下記サイトが参考になるかと思います。HTML とCSS のみなら、どこも同じ方法を使用しています。

"Tableタグで角丸『border-radius』(CSS3)が使えるのか検証→可能"
http://d.hatena.ne.jp/y_guriko/20110114/p1

ただし、I.E 8以下はCSS3(border-radius)に対応していないため、画像を使用しない角丸は表示出来ません。

比較的簡単にコードを生成したい場合には、下記で紹介されているサービスを利用されるとよいかもしれません。

"角丸のHTML・CSSコードを生成してくれる「RoundedCornr」"
http://webpersons.jp/tips/2008/04/roundedcornr.html

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932011/12/11 00:39:57

ポイント50pt

border-radiusのサンプル。回答1にあるようにborder-radiusは新しめのブラウザでしか使えない。
http://jsfiddle.net/cherenkov/2KLDw/

<html>
<head>
<style>
table, td, th {
  border-radius: 5px;
}
</style>
</head>
<body>
<table border=4 width=250 align=center>
 <tr bgcolor="#cccccc">
  <th><br></th>
  <th>列-A</th>
  <th>列-B</th>
  <th>列-C</th>
 </tr>
 <tr align=center>
  <td>行-1</td>
  <td>A1</td>
  <td>B1</td>
  <td rowspan=2>C1-C2</td>
 </tr>
 <tr align=center>
  <td>行-2</td>
  <td>A2</td>
  <td>B2</td>
 </tr>
 <tr align=center>
  <td>行-3</td>
  <td>A3</td>
  <td colspan=2>A3-B3</td>
 </tr>
</table>
</body>
</html>



ブラウザ間で見た目の統一を図るならborder-radiusよりもjquery.corner.js使ったほうがいいのかも。(全てのブラウザで同じ表示になるかは未確認)
http://jsfiddle.net/cherenkov/fasKs/1/

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.corner.js"></script>
<script>
$(function() {
  $("table, td, th").corner();
});
</script>
</head>
<body>
<table border=4 width=250 align=center>
 <tr bgcolor="#cccccc">
  <th><br></th>
  <th>列-A</th>
  <th>列-B</th>
  <th>列-C</th>
 </tr>
 <tr align=center>
  <td>行-1</td>
  <td>A1</td>
  <td>B1</td>
  <td rowspan=2>C1-C2</td>
 </tr>
 <tr align=center>
  <td>行-2</td>
  <td>A2</td>
  <td>B2</td>
 </tr>
 <tr align=center>
  <td>行-3</td>
  <td>A3</td>
  <td colspan=2>A3-B3</td>
 </tr>
</table>
</body>
</html>

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません