−CSSサンプル [table]−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

サンプル1

＜HTML＞
<table class="serviceTB">
<tbody>
<tr>
	<th><p class="icon01"></p></th>
	<td>
	<p></p>
	</td>
</tr>
<tr>
	<th><p class="icon02"></p></th>
	<td>
	<p></p>
	</td>
</tr>
<tr>
	<th><p class="icon03"></p></th>
	<td>
	<p></p>
	</td>
</tr>
</tbody>
</table>


＜CSS＞
/*--------------------------------------------------------
ペット葬儀サービス
--------------------------------------------------------*/

.serviceTB{
	width:100%;
	border-collapse:collapse;
	empty-cells:show;
	line-height:140%;
}
.serviceTB th{
	border-top:solid 1px #297fb8;
	width:40%;
	padding:0px 15px 0px 0px;
	text-align:left;
	vertical-align:top;
	font-size:1.1em;
}
.serviceTB td{
	border-top:solid 1px #297fb8;
	padding:10px 0px 20px 0px;
	font-size:95%;
	vertical-align:top;
}
.serviceTB td p{margin-bottom:10px;}

.icon01{background-image:url(img/service2.png);}
.icon02{background-image:url(img/service3.png);}
.icon03{background-image:url(img/service4.png);}
.icon01, .icon02, .icon03{
	background-color:#297fb8;
	background-repeat:no-repeat;
	padding-left:40px;
	padding-bottom:10px;
	padding-top:10px;
	color:#FFFFFF;

}

@media screen and (max-width: 481px)  {
.serviceTB th, .serviceTB td{display:block;}

.serviceTB th{
	width:80%;
	border-top:none;
}
.serviceTB th p{margin-bottom:0px;}

}