テーブル装飾

c-responsive-table
スマホの時に横スクロール

<div class="c-responsive-table">
	<table>
	～
	</table>
</div>

まずは基本の最初の装飾を消す

/*--------------------
テーブル初期設定-オリジナル
---------------------*/
.decoTB1 td, .decoTB2 td, .decoTB3 td, .decoTB4 td, .decoTB5 td, .decoTB6 td, .decoTB7 td, .decoTB8 td{/*既存の罫線を消す*/
	border:none!important;
}
@media screen and (max-width: 481px)  {/*SP*/
	.decoTB1 td, .decoTB2 td, .decoTB3 td, .decoTB4 td, .decoTB5 td, .decoTB6 td, .decoTB7 td, .decoTB8 td{font-size:80%;}
}

/*テーブルの右側幅設定*/
.TBwidth td:nth-of-type(1){width:40%!important;}

テーブルの装飾1
THにアイコンを入れる。TDは左寄せ。下線のみ。

/*★★★★★★★★★★
テーブルの装飾1
★★★★★★★★★★★*/
.decoTB1 td{border-bottom:solid 1px #999999!important;}
.decoTB1 td:nth-of-type(1){
	background-image:url(/wp-content/plugins/my-snow-monkey/img/icon1.gif);
	background-repeat:no-repeat;
	padding-left:30px;}
}
.decoTB1 td:nth-of-type(2){text-align:right!important;}

テーブルの装飾2
THに背景色。TDは右寄せ。下線のみ。

/*★★★★★★★★★★
テーブルの装飾2
★★★★★★★★★★★*/
.decoTB2 td{
	border-top:solid 5px #FFFFFF!important;
}
.decoTB2 td:nth-of-type(1){
	width:20%;
	background-color:#ea5404;
	color:#FFFFFF;
}
.decoTB2 td:nth-of-type(2){
	padding-left:10px;
	background-color:#EEEEEE;
}
@media screen and (max-width: 481px)  {/*SP*/
.decoTB2 td:nth-of-type(1){
	width:25%;
	font-size:70%;
}
}

テーブルの装飾3
下線2色カラー

/*★★★★★★★★★★
テーブルの装飾3
★★★★★★★★★★★*/
.decoTB3 td{

}
.decoTB3 td:nth-of-type(1){
	width:20%;
	border-bottom:solid 2px #165290!important;
	color:#165290;
	font-weight:bold;
}
.decoTB3 td:nth-of-type(2){
	padding-left:10px;
	border-bottom:solid 2px #a8e2ec!important;
}
@media screen and (max-width: 481px)  {/*SP*/
.decoTB3 td:nth-of-type(1){
	width:25%;
	font-size:70%;
}
}

テーブルの装飾4
ヘッダーセクションあり。

/*★★★★★★★★★★
テーブルの装飾4
★★★★★★★★★★★*/
.decoTB4 td{
	border:solid 1px #CCCCCC!important;
}
.decoTB4 th{
	font-size:1.2em;
}
.decoTB4 tr:nth-of-type(even){background-color:#EEEEEE;}
.decoTB4 td:nth-of-type(2), .decoTB4 td:nth-of-type(3), .decoTB4 td:nth-of-type(4){
	width:25%;
	/*background-color:#ea5404;*/
	/*color:#FFFFFF;*/
	text-align:center;
}

@media screen and (max-width: 481px)  {/*SP*/
.decoTB4 td{
	font-size:70%;
}
}

テーブルの装飾5
シンプルに罫線のみ

/*★★★★★★★★★★
テーブルの装飾5
★★★★★★★★★★★*/
.decoTB5{border-top:solid 1px #999999!important;}
.decoTB5 td{border-bottom:solid 1px #999999!important;}

テーブルの装飾6
縦並び

/*★★★★★★★★★★
テーブルの装飾6
★★★★★★★★★★★*/
.decoTB6 td{
	display:block!important;
	border-bottom:solid 1px #CCCCCC!important;
	border-top:solid 1px #CCCCCC!important;
	border-left:solid 1px #CCCCCC!important;
	border-right:solid 1px #CCCCCC!important;
}
.decoTB6 td:nth-of-type(1){
	text-align:center!important;
	font-weight:bold!important;
	background: linear-gradient(-135deg, #e7d9ff, #a1d9fe)!important;
}
.decoTB6 td:nth-of-type(2){
	background-color:#f4f4f4!important;
}

テーブルの装飾7
PCは横並び、スマホは縦並び

/*★★★★★★★★★★
テーブルの装飾7
★★★★★★★★★★★*/
.decoTB7 td{
	border-bottom:solid 1px #EEEEEE!important;
	border-top:solid 1px #EEEEEE!important;
	border-left:solid 1px #EEEEEE!important;
	border-right:solid 1px #EEEEEE!important;
}
.decoTB7 td:nth-of-type(1){
	width:30%;
	background-color:#46c4db;
	color:#FFFFFF;
}
.decoTB7 td:nth-of-type(2){
	padding-left:10px;
	background-color:#FFFFFF;
}

@media screen and (max-width: 481px)  {/*SP*/
.decoTB7 td{
	display:block!important;
	/*border-bottom:solid 1px #CCCCCC!important;
	border-top:solid 1px #CCCCCC!important;
	border-left:solid 1px #CCCCCC!important;
	border-right:solid 1px #CCCCCC!important;*/
}
.decoTB7 td:nth-of-type(1){
	width:100%;
	color:#FFFFFF;
	text-align:center!important;
	font-weight:bold!important;
	background-color:#46c4db!important;
}
.decoTB7 td:nth-of-type(2){
	background-color:#FFFFFF!important;
}
}

テーブルの装飾8
罫線のみ。ボックスの中に配置

/*★★★★★★★★★★
テーブルの装飾8
★★★★★★★★★★★*/
.decoTB8 td:nth-of-type(1){
	border-left:solid 6px #e88a95!important;
	padding-left:30px;
	vertical-align:top;
}
.decoTB8 td:nth-of-type(2){
	border-left:solid 1px #e88a95!important;
}
@media screen and (max-width: 481px)  {/*SP*/
.decoTB8 td:nth-of-type(1){
	width:25%;
	border-left:none!important;
	padding-left:0px;
}
.accsess_box{margin-left:-15px!important; margin-right:-15px!important;}/*ボックスが端までいく*/
}