.container {
    max-width: 100%;
    /* 确保容器的宽度不超过100% */
    margin: 0 auto;
    /* 使容器居中 */
    text-align: center;
    overflow-x: auto;
    /* 当内容超出容器时出现水平滚动条*/
}

.table-container {
    width: 100%;
    /* 容器宽度根据需要调整 */
    overflow-x: auto;
    /* 内容溢出时显示滚动条 */
}

/* 固定第一列宽度 */
#selection td:first-child,
#selection th:first-child {
    width: 50px;
    /* 固定宽度 */
    min-width: 50px;
    /* 最小宽度 */
    max-width: 300px;
    /* 最大宽度 */
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

/* 固定最后一列宽度 */
#selection td:last-child,
#selection th:last-child {
    width: 100px;
    min-width: 100px;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #ddd;
    text-align: center;
}


/* 按钮的基本样式 */
button {
    background-color: white; /* 按钮背景色 */
    color: black;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease; /* 添加平滑过渡效果 */
}

/* 按钮按下时的效果 */
button:active {
    background-color: #0056b3; /* 按下时改变背景色 */
    transform: translateY(4px); /* 模拟按下效果，按钮向下移动 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

/* 鼠标悬停时的效果 */
button:hover {
    background-color: #0069d9; /* 悬停时背景色 */
}

/* 按钮点击后的样式 */
button.clickedRed {
    background-color: #E93333; /* 点击后背景色 */
}
/* 按钮点击后的样式 */
button.clickedBlue {
    background-color: #1201FD; /* 点击后背景色 */
}