CSSのdisplayプロパティを使って作るtableの確認です。displayプロパティには、table要素とほぼ同様の動きが用意されています。ただし、table要素のcolspanやrowspan的な指定はできません。

サンプルは、table要素を使わずにtable構造を作っていますが、4行目でcolspan的なセルを作るため、構造の基本になる「display:table」を3つ繋いでいます。

サンプルのtable構造

table-caption
thead1
thead2
thead3
thead4
thead5
tbody1-1
tbody1-2
tbody1-3
tbody1-4
tbody1-5
tbody2-1
tbody2-2
tbody2-3
tbody2-4
tbody2-5
tbody3-1
tbody3-2
tbody3-3
tbody3-4
tbody3-5
tbody4-1
tbody4-2
tbody4-3
tbody4-4

サンプルのhtmlソース

<div class="d_table">
	<div class="d_caption">table-caption</div>
	<div class="d_thead">
		<div class="d_tr">
			<div class="d_th">thead1</div>
			<div class="d_th">thead2</div>
			<div class="d_th">thead3</div>
			<div class="d_th">thead4</div>
			<div class="d_th">thead5</div>
		</div>
	</div>
	<div class="d_tbody">
		<div class="d_tr">
			<div class="d_td">tbody1-1</div>
			<div class="d_td">tbody1-2</div>
			<div class="d_td">tbody1-3</div>
			<div class="d_td">tbody1-4</div>
			<div class="d_td">tbody1-5</div>
		</div>
		<div class="d_tr">
			<div class="d_td">tbody2-1</div>
			<div class="d_td">tbody2-2</div>
			<div class="d_td">tbody2-3</div>
			<div class="d_td">tbody2-4</div>
			<div class="d_td">tbody2-5</div>
		</div>
		<div class="d_tr">
			<div class="d_td">tbody3-1</div>
			<div class="d_td">tbody3-2</div>
			<div class="d_td">tbody3-3</div>
			<div class="d_td">tbody3-4</div>
			<div class="d_td">tbody3-5</div>
		</div>
	</div>
</div>
<div class="d_table"> 
	<div class="d_tbody">
		<div class="d_tr">
			<div class="d_td1">tbody4-1</div>
			<div class="d_td1">tbody4-2</div>
			<div class="d_td2">tbody4-3</div>
			<div class="d_td1">tbody4-4</div>
		</div>
	</div>
</div>
<div class="d_table"> 
	<div class="d_foot">
		<div class="d_footer">     	
			<div class="d_footcell"></div>
			<div class="d_footcell"></div>
			<div class="d_footcell">tfoot</div>
			<div class="d_footcell"></div>
			<div class="d_footcell"></div>      
		</div>
	</div>
</div>

サンプルのCSSソース

.d_table {
	width:100%;
	display: table;
	border-collapse: collapse;
	text-align:center;
	margin:0;
	}
.d_caption {
	display: table-caption;
	}
.d_thead  {
	display:table-header-group;
	background:lightgreen;
	font-weight:bold;
	}
.d_tbody {
	display:table-row-group;
	}
.d_foot  {
	display:table-footer-group;
	}
.d_tr {
	display: table-row;
	}
.d_th,.d_td,.d_td1,.d_td2  {
	display: table-cell;
	padding: 5px 0;
	border: 1px solid #999;
	vertical-align: middle;
	width:20%;
	}
.d_td1,.d_td2 {
	border-width:0 1px;
	}
.d_td2 {
	width:40%;
	}
.d_footer {
	display: table-row;
	border: 1px solid #999;
	vertical-align: middle;
	}
.d_footcell {
	display: table-cell;
	padding: 5px 0;	
	}

 

戻るボタン