角丸 dl,dt,ddの擬似テーブル

CSS3.0などを使って角丸の擬似テーブルを作ってみました。

画像とか使わなくても、できちゃう！

DT1
DD1-1
DD1-2
DD1-3
DT2
DD2-1
DD2-2
DT3
DD3-1
DD3-2
DT4
DD4-1

角丸 dl dt dd 擬似table（HTML5で書いてます。）

なってないぞー！！っていう人は、対応してないブラウザです；WebKitとかGoogle Chromeとかでみてみてください！

HTML

<dl>
	<dt>DT1</dt>
	<dd>DD1-1</dd>
	<dd>DD1-2</dd>
	<dd>DD1-3</dd>
	<dt>DT2</dt>
	<dd>DD2-1</dd>
	<dd>DD2-2</dd>
	<dt>DT3</dt>
	<dd>DD3-1</dd>
	<dd>DD3-2</dd>
	<dt>DT4</dt>
	<dd>DD4-1</dd>
</dl>

CSS

dl.table {
	margin: 1em 20px;
	border: 1px solid #ccc;
	background-color: #eee;

	-webkit-box-shadow: 3px 3px 3px #eee;
	-webkit-border-radius: 8px;
}

dl.table dt {
	margin: 0;
	margin-right: -13em;
	margin-top: -1px;
	padding: 0.2em 0;
	border-top: 1px solid #ccc;
	float: left;
	clear: both;
	display: inline;
	width: 13em;
	text-indent: 10px;
}

dl.table dt:nth-of-type(1)  {
	margin-top: 0;
	border-top: none;
}

dl.table dd:nth-of-type(1)  {
	margin-top: 0;
	border-top: none;
	-webkit-border-top-right-radius: 8px;
}

dl.table dd:nth-of-type(odd) {
	background-color: #f5f5f5;
}

dl.table dd:last-child {
	-webkit-border-bottom-right-radius: 8px;
}

dl.table dd {
	margin-left:13em;
	margin-top: -1px;
	padding: 0.2em 10px;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	background-color: #fff; 
}

/*--------------------
	clearfix
--------------------*/

dl.table {
	/*\*/
	min-height: 1px;
	_height: 1%;
	/* */

	/*\*//*/
	overflow: hidden;
	/**/
}

dl.table::after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

昔のブラウザで見ても普通の擬似テーブルに見えますし、WebKitとかGoogle Chromeとかでみると、角丸＋シャドウ＋しましまでちょっと綺麗な擬似テーブルにみえる仕掛けをしています。（Firefoxだとしましまだけ反映されてみえるかも！）

なので、ちょっとおしゃれにしたいなぁってときは、新しい技術つかってやってみるのもいいかも！と思いました！

関連

コメント : 0

コメントフォーム
情報を保存しますか？

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/76

このページの先頭へ戻る