/*
    2015-11-06 table-responsive create by Tsai,Chi-Hung(tch) v0.1
    2015-12-01 table-responsive add class name in mobile state can choice content show/hidden ,and text left|center|right by Tsai,Chi-Hung(tch) v0.2
*/
@charset "utf-8";

/*  2015-11-06 add table-responsive-1 (原生) by tch   */
.table-responsive-1 > table{
    width: 100%;
    max-width: 100%;
}
@media screen and (max-width: 767px) {
  .table-responsive-1 {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;  /* iPhone WebApp */
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd; /* 定義scroll外框 */
  }
  .table-responsive-1 > table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
  }
  .table-responsive-1 > table > thead > tr > th,
  .table-responsive-1 > table > tbody > tr > th,
  .table-responsive-1 > table > tfoot > tr > th,
  .table-responsive-1 > table > thead > tr > td,
  .table-responsive-1 > table > tbody > tr > td,
  .table-responsive-1 > table > tfoot > tr > td {
    white-space: nowrap;/* 段落中的字串不換行 */
  }

  /* 移除原table外框 */
  .table-responsive-1 > table {
    border: 0;
  }

  /* 移除table內各<tr>最左邊的<th><td>左邊框和<tr>的左邊框 */
  .table-responsive-1 > table > thead > tr > th:first-child,
  .table-responsive-1 > table > tbody > tr > th:first-child,
  .table-responsive-1 > table > tfoot > tr > th:first-child,
  .table-responsive-1 > table > thead > tr > td:first-child,
  .table-responsive-1 > table > tbody > tr > td:first-child,
  .table-responsive-1 > table > tfoot > tr > td:first-child ,
  .table-responsive-1 > table > thead > tr ,
  .table-responsive-1 > table > tbody > tr ,
  .table-responsive-1 > table > tfoot > tr {
    border-left: 0;
  }
  /* 移除table內各<tr>最右邊<th><td>的右邊框 */
  .table-responsive-1 > table > thead > tr > th:last-child,
  .table-responsive-1 > table > tbody > tr > th:last-child,
  .table-responsive-1 > table > tfoot > tr > th:last-child,
  .table-responsive-1 > table > thead > tr > td:last-child,
  .table-responsive-1 > table > tbody > tr > td:last-child,
  .table-responsive-1 > table > tfoot > tr > td:last-child ,
  .table-responsive-1 > table > thead > tr ,
  .table-responsive-1 > table > tbody > tr ,
  .table-responsive-1 > table > tfoot > tr {
    border-right: 0;
  }
  /* 移除table最後一個<tr>的<th><td>下邊框 */
  .table-responsive-1 > .table-bordered > tbody > tr:last-child > th,
  .table-responsive-1 > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive-1 > .table-bordered > tbody > tr:last-child > td,
  .table-responsive-1 > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}

/*  2015-11-06 add table-responsive-2 (原生) by tch   */
table.table-responsive-2{
    width: 100%;
    max-width: 100%;
}
@media screen and (max-width: 767px) {
    /* remove table border */
    table.table-responsive-2{
        border: none;
    }
    /* Force table to not be like tables anymore */
    table.table-responsive-2,
	.table-responsive-2 thead,
	.table-responsive-2 tbody,
    .table-responsive-2 tfoot,
	.table-responsive-2 th,
	.table-responsive-2 td,
	.table-responsive-2 tr {
		display: block;
        width: 100%;
	}
    /* Hide table headers (but not display: none;, for accessibility) */
    .table-responsive-2 > thead > tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
        
    .table-responsive-2 tr { border: 1px solid #ccc; margin-bottom: 20px; }

    .table-responsive-2 > thead > tr > th,
    .table-responsive-2 > tbody > tr > th,
    .table-responsive-2 > tfoot > tr > th,
    .table-responsive-2 > thead > tr > td,
    .table-responsive-2 > tbody > tr > td,
    .table-responsive-2 > tfoot > tr > td{
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		/*white-space: normal;*/
        word-break: break-all;
	}
    
    /* vice-title(th) */
    .table-responsive-2 > tbody > tr > th{
        /*display:none;*/
		/*white-space: normal;*/
        padding: 10px;
		text-align:center;
    }
    
    /*Each td in tr */
    .table-responsive-2 > thead > tr > td,
    .table-responsive-2 > tbody > tr > td{
    /*.table-responsive-2 > tfoot > tr > td{*/
		/* Behave  like a "row" */
		position: relative;
		padding-left: 50%;
        padding-top: 8px;
        padding-bottom: 8px;
		/*white-space: normal;*/
		text-align:left;
	}

    .table-responsive-2 td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		/*width: 45%;*/
		padding-right: 10px;
		white-space: nowrap;
        text-align:left;
        /*text-transform: uppercase;*/
        font-weight: bold;
	}
    /*    Label the data    */
    .table-responsive-2 td:before { content: attr(data-label); }
}

/*  2015-11-06 add table-responsive-3 (原生) by tch   */
table.table-responsive-3{
    width: 100%;
    max-width: 100%;
}
@media screen and (max-width: 767px) {
    /* remove table border */
    table.table-responsive-3{
        border: none;
    }
    /* Force table to not be like tables anymore */
    table.table-responsive-3,
	.table-responsive-3 thead,
	.table-responsive-3 tbody,
	.table-responsive-3 tfoot,
	.table-responsive-3 th,
	.table-responsive-3 td,
	.table-responsive-3 tr {
		display: block;
        width: 100%;
	}
    /* Hide table headers (but not display: none;, for accessibility) */
    .table-responsive-3 > thead > tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
    
    .table-responsive-3 tr { border: 1px solid #ccc; margin-bottom: 20px;}

    .table-responsive-3 > thead > tr > th,
    .table-responsive-3 > tbody > tr > th,
    .table-responsive-3 > tfoot > tr > th,
    .table-responsive-3 > thead > tr > td,
    .table-responsive-3 > tbody > tr > td,
    .table-responsive-3 > tfoot > tr > td{
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		padding: 10px;
		/*white-space: normal;*/
        word-break: break-all;
	}
    
    /* vice-title(th) */
    .table-responsive-3 > tbody > tr > th{
        /*display:none;*/
		/*white-space: normal;*/
        padding: 10px;
		text-align:center;
    }
    
    /*Each td in tr */
    .table-responsive-3 > thead > tr > td,
    .table-responsive-3 > tbody > tr > td,
    .table-responsive-3 > tfoot > tr > td{
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		padding: 10px;
		/*white-space: normal;*/
		text-align:left;
	}

    .table-responsive-3 td:before {
		white-space: nowrap;
        text-align:left;
        font-weight: bold;
	}
    /*    Label the data    */
    /*.table-responsive-3 td:before { content: attr(data-label) " : "; }*/
    .table-responsive-3 td:before { content: attr(data-label); }
}

/* 2015-12-01 add table-m-combine-tr : no margin between each tr by tch */
@media screen and (max-width: 767px) {
    /* no margin-bottom between each tr  */
    table.table-m-combine-tr tr { margin-bottom: 0px;}
    /* remove every tr border */
    table.table-m-combine-tr tr { border: none; }
}

/* 2015-12-01 add m-hidden by tch*/
@media screen and (max-width: 767px) {
    table .table-m-hidden{
        display: none;
    }
}
/* 2015-12-01 add m-Visible-block block by tch*/
@media screen and (max-width: 767px) {
    table .table-m-Visible-block{
        display: block;
    }
}
/* 2015-12-01 add m-Visible-inline inline by tch*/
@media screen and (max-width: 767px) {
    table .table-m-Visible-inline{
        display: inline;
    }
}
/* 2015-12-01 add m-Visible-inline-block inline-block by tch*/
@media screen and (max-width: 767px) {
    table .table-m-Visible-inline-block{
        display: inline-block;
    }
}

/* 2015-12-01 add text left by tch*/
@media screen and (max-width: 767px) {
    table tr > td.table-m-left,
    table tr > th.table-m-left{
        text-align: left;
    }
}
/* 2015-12-01 add text center by tch*/
@media screen and (max-width: 767px) {
    table tr > td.table-m-center,
    table tr > th.table-m-center{
        text-align: center;
    }
}
/* 2015-12-01 add text right by tch*/
@media screen and (max-width: 767px) {
    table tr > td.table-m-right,
    table tr > th.table-m-right{
        text-align: right;
    }
}