section table	{ width: 100%; }
section th	{ padding: 10px; border: 1px solid #ddd;text-align:center; }
section td	{ padding: 10px; border: 1px solid #ddd; }
section th	{ background: #f4f4f4; }

/*----------------------------------------------------
	.demo01
----------------------------------------------------*/
.demo01 th	{ width: 30%; text-align: left; }
@media only screen and (max-width:480px){
	.demo01	{ margin: 0 -10px; }
    .demo01 th,
    .demo01 td{
		width: 100%;
        display: block;
		border-top: none;
    }
	.demo01 tr:first-child th	{ border-top: 1px solid #ddd; }
}

/*----------------------------------------------------
	.demo02
----------------------------------------------------*/
.demo02 th	{ width: 13%; }
.demo02 td	{ text-align: center; }
.demo02 td:first-child	{ text-align: left; }
@media only screen and (max-width: 800px) { 
	.demo02 { 
		display: block; 
		width: 100%; 
		margin: 0 -10px;
	}
	.demo02 thead{ 
		display: block; 
		float: left;
		overflow-x:scroll;
	}
	.demo02 tbody{ 
		display: block; 
		width: auto; 
		overflow-x: auto; 
		white-space: nowrap;
	}
	.demo02 th{ 
		display: block;
		width:auto;
	}
	.demo02 tbody tr{ 
		display: inline-block; 
		margin: 0 -3px;
	}
	.demo02 td{ 
		display: block;
	}
}

/*----------------------------------------------------
	.demo03
----------------------------------------------------*/
.demo03 th, .demo03 td	{ width: 20%; text-align: left; }
@media only screen and (max-width: 480px) { 
	.demo03	{ margin: 0 -10px; }
	.demo03 tr {
		display:block;
		margin-bottom: 10px;
	}
	.demo03 th {
		display:block;
		width: 100%;
	}
	.demo03 td {
		display: list-item;
		width: 90%;
		margin-left: 10%;
		border:none;
	}
}