/* Write your custom css code here */

.styled-table {
    width: 100%;
    border-collapse: collapse; /* 合併邊框以消除多餘空隙 */
    margin: 20px 0;
    font-size: 16px;
    font-family: sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 柔邊陰影 */
    border-radius: 10px; /* 整體圓角 */
    overflow: hidden; /* 隱藏超出圓角的內容 */
}

.styled-table thead tr {
    background-color: #009879; /* 表頭背景色 */
    color: #ffffff; /* 表頭文字顏色 */
    text-align: left;
    font-weight: bold;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px; /* 內距確保不擁擠 */
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd; /* 分隔線 */
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3; /* 偶數列斑馬紋 */
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879; /* 最後一列加粗底線 */
}

.styled-table tbody tr:hover {
    background-color: #e2f5ec; /* 滑鼠懸停效果 */
    font-weight: bold;
}