.stockTable {
    overflow-x: auto;
}

.stockTable table {
    border-collapse: collapse;
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #dfdfdf
}

#table_strategy_stocks th {
    /* 特别针对th元素设置换行 */
    white-space: normal; /* 允许正常换行 */
}

.sorted {
    font-weight: bold;
    color: red;
}

.stockTable th {
    font-size: 13.5px;
}

/*.stockTable th:hover {*/
/*    color: orange;*/
/*}*/

.stockTable th, td {
    text-align: left;
    padding-left: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    white-space: nowrap; /* 防止自动换行 */
}

.stockTable td {
    line-height: 1.5; /* 使用无单位的数字，这将相对于元素的字体大小设置行高 */
    font-size: 13.5px;
    color: rgb(102, 102, 102)
}

.stockTable th img {
    width: 10px;
    margin-left: 2px
}

.stockTable tr:nth-child(even) {
    background-color: whitesmoke;
}
.price_up {
    color: red;
}
.stockTable .price_up {
    color: red;
}

.stockTable .price_down {
    color: green;
}
.price_down {
    color: green;
}
.pagination {
    padding: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

}

.pagination button {
    display: inline-block;
    padding: 6px 8px;
    margin-right: 5px;
    font-size: 14px;
    color: #3a3a3a; /* 深灰色文本 */
    background-color: #F0F0F0;
    border: none;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 添加轻微的阴影 */
}

.pagination button:disabled {
    color: grey;
    color: #D0D0D0; /* 深灰色文本 */
    cursor: not-allowed;
}

.submit-button {
    color: var(--main-color);
}

.submit-button:hover {
    background-color: var(--main-color);
    color: white;
}

.submit-button:active {
    background-color: #FF7F7F; /* 点击按下后的背景色 */
}

.date-picker1 input[type="date"] {
    padding: 5px;
    margin: 0 10px;
    width: 120px;
    background-color: whitesmoke;
}

@media (max-width: 768px) {
    /*开始-给表格增加滚动条增加table样式*/
    .stockTable {
        overflow: auto;
        width: 100%;
        max-height: 360px; /* 限制高度 */
    }

    .stockTable table {
        table-layout: auto; /* 很重要 */
        width: max-content; /* 使表格宽度适应内容 */
        border: none;
    }

    /* 针对大于第2列的<th>和<td>元素 */
    .stockTable table th:nth-child(n+3),
    .stockTable table td:nth-child(n+3) {
        min-width: 100px;
        max-width: 300px;
        white-space: nowrap; /* 禁止换行 */
        overflow: hidden; /* 超出部分裁剪 */
        text-overflow: ellipsis; /* 超出部分用省略号表示 */
    }

    .stockTable th {
        background-color: #F0F8FF;
    }

    /* 控制左边固定的核心代码 */
    .stockTable td:nth-child(1), .stockTable th:nth-child(1) {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        left: 0; /* 首行在左 */
        width: 100px;
        overflow: hidden; /* 超出部分裁剪 */
        z-index: 1;
        background-color: #FFF5EE;
    }

    .stockTable td:nth-child(2),
    .stockTable th:nth-child(2) {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        left: 100px;
        z-index: 1;
        background-color: #FFF5EE;
    }

    .stockTable th:nth-child(1),
    .stockTable th:nth-child(2) {
        z-index: 2;
        background-color: #F0F8FF;
    }

    /* 控制表头固定的核心代码 */
    .stockTable thead tr th {
        position: sticky;
        top: 0; /* 第一列最上 */
    }
}

/*结束 表格左侧固定，其他列横向可滚动*/
@media (max-width: 450px) {
    /*开始-给表格增加滚动条增加table样式*/
    .stockTable {
        overflow: auto;
        width: 100%;
        max-height: 360px; /* 限制高度 */
    }

    .stockTable table {
        table-layout: auto; /* 很重要 */
        width: max-content; /* 使表格宽度适应内容 */
        border: none;
    }

    /* 针对大于第2列的<th>和<td>元素 */
    .stockTable table th:nth-child(n+3),
    .stockTable table td:nth-child(n+3) {
        min-width: 100px;
        max-width: 300px;
        white-space: nowrap; /* 禁止换行 */
        overflow: hidden; /* 超出部分裁剪 */
        text-overflow: ellipsis; /* 超出部分用省略号表示 */
    }

    .stockTable th {
        background-color: #F0F8FF;
    }

    /* 控制左边固定的核心代码 */
    .stockTable td:nth-child(1), .stockTable th:nth-child(1) {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        left: 0; /* 首行在左 */
        width: 100px;
        overflow: hidden; /* 超出部分裁剪 */
        z-index: 1;
        background-color: #FFF5EE;
    }

    .stockTable td:nth-child(2),
    .stockTable th:nth-child(2) {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        left: 100px;
        z-index: 1;
        background-color: #FFF5EE;
    }

    .stockTable th:nth-child(1),
    .stockTable th:nth-child(2) {
        z-index: 2;
        background-color: #F0F8FF;
    }

    /* 控制表头固定的核心代码 */
    .stockTable thead tr th {
        position: sticky;
        top: 0; /* 第一列最上 */
    }
}