CSS:角丸のテーブルを作成する方法

  • Posted on
  • Category : Tips
CSS:角丸のテーブルを作成する方法

テーブルをCSSを使って角丸にする方法です。以前は角丸部分に特定のクラスをそれぞれ記述して、場合によってはJavaScriptと併用して実装していたり、特定のブラウザの為に画像を使うとか親要素にdiv要素を幾つか記述するとかいろいろ面倒なことしてたのですが、最近はそれらをしないでも実現できる機会も増え、使用頻度も割と高いので備忘録として残しておきます。

角丸テーブルの完成イメージ

角丸テーブルの完成イメージ

以下ではこのようなデザインの角丸テーブルを実装する想定で説明しています。
実際の表示用デモなどは用意していないので、ちゃんとブラウザで動きを見たい場合は以下で紹介しているコード使って自身の環境で確認してください。

あるプロパティが指定されていると角丸にならない

CSSで角丸と言えばborder-radiusを思い浮かべ、これをtableに指定するだけではと思いがちですが、結論から言うとあるプロパティが指定されていると、単純にborder-radiusを指定するだけでは角丸になってくれないです。

例えば以下のようなシンプルなテーブルを表示させるためのHTMLとCSSを記述し、CSSでは角丸にさせたいのでtableに対してborder-radius: 6px;を記述します。

HTML

<table>
	<thead>
		<tr>
			<th>&nbsp;</th>
			<th>th</th>
			<th>th</th>
			<th>th</th>
			<th>th</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>th</th>
			<td>td</td>
			<td>td</td>
			<td>td</td>
			<td>td</td>
		</tr>
		<tr>
			<th>th</th>
			<td>td</td>
			<td>td</td>
			<td>td</td>
			<td>td</td>
		</tr>
		<tr>
			<th>th</th>
			<td>td</td>
			<td>td</td>
			<td>td</td>
			<td>td</td>
		</tr>
	</tbody>
</table>

CSS

.table {
	border: 1px solid #aaa;
	border-collapse: collapse;
	border-spacing: 0;
	border-radius: 6px;
}
.table th,
.table td {
	padding: .5em 2em;
	border: 1px solid #aaa;
}
.table thead th {
	background-color: #ddd;
}
.table tbody th {
	background-color: #eee;
}

記述を見るだけだとパッと見は角丸のテーブルができそうな気もしますが、実際に見栄えを表示を確認すると下のイメージのように角丸にはなってくれません…。

角丸にならない...

上であるプロパティが指定されていると角丸にならないと書きましたが、実はあるプロパティというのはborder-collapse: collapse;になります。
border-collapse: collapse;を指定すると隣接するセルのボーダーを重ねて表示してテーブルのボーダー表示を楽に装飾できるため、よく共通やリセットのCSSでtableに対して指定しているという人も多いと思いますが、これが指定されていると角丸になってくれません。
なので具体的なコードは後述しますが、角丸のテーブルを使いたいという場合はtableに対してborder-collapse: separate;を指定しておく必要があります。

角丸テーブル実装方法 #1

上で角丸テーブルを実装する場合はtableに対してborder-collapse: separate;を指定する必要があることを挙げましたが、だからと言って単純に先ほどのコードの一部を変更すれば実装できるのかというとそういうわけではありません。
先ほどのコードでborder-collapse: separate;を指定することでたしかに角丸のテーブルは表示されるようにはなるのですが、下のイメージのようにセルに表示されるボーダーを本当は1pxにしたいのに太く表示される(ボーダーが重ならずにそのまま表示される)ようになってしまったり、よく見ると四隅のボーダーや背景色が外枠からはみ出ているような感じになってしまいます…。

四隅のボーダーや背景色が外枠からはみ出ているような感じに...

実装したいのは冒頭にあるイメージのようなデザインのテーブルになるので、それを実現させるためにはCSSを以下のように記述します。

※HTMLを上で紹介したものと同じものを使用した場合

CSS

table {
	border: 1px solid #aaa;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 6px;
	overflow: hidden;
}
table thead th,
table tbody th,
table tbody td {
	padding: .6em 3em;
	border-bottom: 1px solid #aaa;
}
table thead th {
	background-color: #ddd;
}
table tbody th {
	background-color: #eee;
}
table thead th + th,
table tbody td {
	border-left: 1px solid #aaa;
}
table tbody tr:last-child th,
table tbody tr:last-child td {
	border-bottom: none;
}

はじめに紹介したものは全てのthtdborder: 1px solid #aaa;という形で全方向にborderを指定していましたが、それをやめて上記のようにまずborder-bottomのみを指定し、次に隣接セレクタと:last-childの疑似クラスを用いて特定のセルのborderを追加・削除します。
これでほぼ希望通りの見た目になりますが、やはりこの状態でも四隅のボーダーや背景色が外枠からはみ出ているような感じになってしまうので、それを回避するためにtableoverflow: hidden;を指定します。
ここまで記述して表示を確認すると、冒頭の完成イメージのような角丸テーブルになります。

ただ、上記方法でChromeやFirefox、iPhoneやiPadなどひと通りのブラウザ・デバイスで問題なく表示されているように見えるのですが、IEだけはIE11であってもはみ出ている現象が直りません…。
なので、IEにももちろん対応しないといけないという時は次の「角丸テーブル実装方法 #2」を利用します。

角丸テーブル実装方法 #2

先述したように「角丸テーブル実装方法 #1」の方法でもほとんどの環境で角丸テーブルの見た目を実装できますが、IEでは四隅が綺麗に表示されません…。
結局長ったらしい感じにはなってしまいますが、IEでも問題なく表示される角丸テーブルを実装したいという時は、CSSを以下のように記述します。

※HTMLを上で紹介したものと同じものを使用した場合

CSS

table {
	border: 1px solid #aaa;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 6px;
}
table thead th,
table tbody th,
table tbody td {
	padding: .6em 3em;
	border-bottom: 1px solid #aaa;
}
table thead th {
	background-color: #ddd;
}
table tbody th {
	background-color: #eee;
}
table thead th + th,
table tbody td {
	border-left: 1px solid #aaa;
}
table tbody tr:last-child th,
table tbody tr:last-child td {
	border-bottom: none;
}
table thead tr:first-child th:first-child {
	border-radius: 5px 0 0 0;
}
table thead tr:first-child th:last-child {
	border-radius: 0 5px 0 0;
}
table tbody tr:last-child th:first-child {
	border-radius: 0 0 0 5px;
}
table tbody tr:last-child th:last-child {
	border-radius: 0 0 5px 0;
}

基本的な指定は「角丸テーブル実装方法 #1」とほとんど一緒で、thtdへのborder指定を全方向で一気に指定などはせず、隣接セレクタと:last-childの疑似クラスを用いて特定のセルのborderを追加・削除するように指定しておきます。
あとはtrfirst-childlast-childを使う形で、四隅になるセル(今回のサンプルの場合は全てth)それぞれにborder-radiusを指定することで、IEでも問題なく表示される角丸テーブルを実装することができます。

以上、テーブルをCSSを使って角丸にする方法でした。
結局冒頭に述べた以前のやり方のように特定のセルにスタイル指定するという形に落ち着いたのですが、一応上記のような方法で角丸テーブルが実装可能で、疑似クラスを使うことでクラス使用時よりもHTMLが多少はスッキリしますし、変更したい時もCSSを少し変更するだけ(もちろんtheadtbodyがないとか、隣接するタグが異なるなどの場合は別)がほとんどなので、自分は普段から角丸テーブルを作りたい時はこの方法をベースにすることが多いです。
ただ、もっとスッキリしててスマートにできる方法あるよっていう人がいれば是非教えてください :)

Back to Top

CSS:角丸のテーブルを作成する方法

CSS:角丸のテーブルを作成する方法

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。