.table {
    width: 99%;
    border-collapse: collapse;
    font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif;
    text-align:center;
}

    .table th,
    .table td{
        border: 1px solid #ccc; /* 灰邊框 */
        padding: 8px;
        font-size: 16px;
        text-align: center;
        vertical-align: middle;
        word-wrap: break-word; /* 將文字斷行 */
        vertical-align: middle; /* 垂直置中 */
    }


    .table tr:nth-child(even) {
        background-color: #fbf9e5; /* 白 */
    }

    .table tr:nth-child(odd) {
        background-color: #fbfbfd; /* 淡黃 */
    }
        

    @media screen and (orientation:landscape) { /*電腦*/
        .table th {
        text-align: center;
        font-weight: 900;
        white-space: nowrap;
  
    }

    .green th {
        background-color: #e2f0d9; /* 淡綠底*/
    }

    .blue th {
        background-color: #deebff; /* 淡藍底*/
    }
        .table tr:hover {
            background-color: #e0e0e0;
        }
        td[data-label="學制名稱"], td[data-label="部別名稱"], td[data-label="學制簡稱"], td[data-label="管道名稱"], td[data-label="系科名稱"], td[data-label="自訂義名稱"], td[data-label="分數查詢"], td[data-label="招生系科"] {
            text-align: left;
        }
}

    @media screen and (max-width: 991px) { /*************************手機*********************************/
        .table {
            border: 0;
        }

            .table thead {
                display: none;
            }

            .table, .table tbody, .table tr, .table td {
                display: block;
                width: 100%;
                /*border: 1px solid black;*/ /* 黑邊框 */
            }

                .table th,
                .table td {
                    border-top: 1.2px dashed #ccc; /* 內部上邊框為灰虛線 */
                    border-bottom: 1px dashed #ccc; /* 內部下邊框為灰虛線 */

                    min-height: 48px;
                    padding: 8px;
                    font-size: 16px;
                    text-align: center;
                    vertical-align: middle;
                    padding-left: 40%;
                    position: relative;
                }

                .table th {
                    text-align: center;
                    font-weight: 900;
                    word-wrap: break-word; /* 將文字斷行 */
                }
                /*input圖層要顯示在上面才能按*/
                .table td input {
                    position: relative;
                    z-index: 50;
                }

                .table td:before {
                    content: attr(data-label);
                    position: absolute;
                    left: 0;
                    /*width: 50%;*/
                    width: 35%; /* 原本是 50%，太寬會蓋到文字 */
                    padding-left: 15px;
                    font-weight: bold;
                    text-align: left;
                    display: flex; /* 使用 Flexbox */
                    align-items: center; /* 垂直置中 */
                    height: 100%; /* 確保高度填滿父元素 */
                    top: 50%; /* 將文字置中 */
                    transform: translateY(-50%); /* 將文字上移一半高度 */
                }

        td[data-label="序號"], td[data-label="代碼"], td[data-label="部別代碼"], td[data-label="學制代碼"], td[data-label="管道代碼"], td[data-label="系科代碼"], td[data-label="運動績優代碼"], td[data-label="自訂義名稱"], td[data-label="身份別代碼"], td[data-label="報名序號"], td[data-label="項次"], td[data-label="學年度"], td[data-label="招生系科"] {
            background-color: #e2f0d9;
            text-align: center;
        }
        td[data-label="分數查詢"] {
            text-align: left;
        }
        td[data-label="　"] {
            background-color: #e2f0d9;
            display: none;          /*讀取沒資料的話，讓表格消失*/
        }


        
        /* 在每列的最後一個 <td> 元素後添加空行 */
            /*.table tr td:last-child {
        margin-bottom: 20px;*/ /* 調整空白行的高度 */
            /*}*/
        }