﻿.RwdTable {
    border: 1px solid #000000;
    border-collapse: collapse;
}

.RwdTable td,th {/*td,th順序顛倒，則該頁所有的thtd都會受影響，須由小td至大th寫*/
    border: 1px solid #000000;
    padding: 2px 4px;
    text-align: center;
}

/*覆寫參數開始，如設定為class="RwdTable RwdTableBorder0"，表示不需要格線*/
.RwdTableBorder0,.RwdTableBorder0 td,.RwdTableBorder0 th {
    font-family:"微軟正黑體";
    border:0px;
}
/*覆寫參數結束*/

.RwdTableColor-gray ,.RwdTableBorder-gray td ,.RwdTableBorder-gray th {
    font-family:"微軟正黑體";
    border: 1px solid #ccc !important;
}

@media screen and (max-width: 600px) {
    .RwdTable {
        min-width: 100%;
        border: 0;
    }

    .RwdTable tr {
        border: 1px solid #000000;
    }

    /*若打開此區，則每一列資料會像是獨立的Div模塊，上下都會有5px距離*/
    .RwdTable tr {
        display: block;
        margin-top: 5px;
    }

    .RwdTable thead {
        display: none !important;
    }
    /*若打開此區--結束*/

    .RwdTable th { /*將th全部隱藏起來*/
        display: none;
    }
        .RwdTable td, th {
            border-bottom:0px
        }
    /*內容相關*/
    .RwdTable td {
        display: block; /*讓td*/
        border: 0px solid #FFF;
        text-align: left; /*設定內容靠左對齊*/
        padding-left: 3px; /*這不是設定內容與標頭，而是設定整列跟表格的左側距離，若要設定內容與標頭之間的距離，請於td:before內設定padding-right:15px*/
        margin: 5px; /*整列的上下左右外距*/
    }

    /*標頭相關*/
    .RwdTable td:before { /*取得data-th的內容*/
        content: attr(data-th) " : ";
        float: left;
        padding-right: 5px; /*與右側內容的距離*/
        /*設定標頭與內容的對齊開始,也可設定right
        text-align:left;
        width:30%;/*設定標頭的寬度佔整行的30%*/
        /*設定標頭與內容的對齊結束*/
        font-weight: bold;
        color: #0397c0;
        display: inline-block;
    }




    /*覆寫參數開始*/

    /*設定標題與內容之間的符號*/
    .RwdTableHeadPredot td:before {
        content: attr(data-th) "  ";
    }
    
    /*覆寫參數結束*/
}
