反应表中水平滚动条和粘性标题的CSS样式

Question

我需要在表中添加粘性标题，并且它应该具有水平滚动条。对于水平滚动条，我使用了overflow-x：auto选项。但是，当我添加position：sticky时，它不会得到体现。当我删除overflow-x时，sticky：position会被反映，即，即使我向下滚动，列也会固定。 即使同时垂直或水平滚动，我也需要同时具有水平滚动条和表格标题。如何实现呢？

PFB样式和HTML

   .table.data {
width: 100%;
overflow-x: auto;
white-space: pre-wrap;

td, th {
    padding: 2px 5px;
}

tr {
    td {
        .form-group {
            margin: 0;

            label {
                display: block;
                margin: 0;
            }
        }
    }
}

th {
    z-index: 1;
    vertical-align: bottom;
    padding-top: 5px;
    position: sticky;
    top: -1px;
    background-color: $color-content-bg;

    input[type='text'] {
        width: 100%;
    }
}

th, td {
    border-top: 1px solid $border-color;
}

tr:nth-child(even) {
    background-color: $color-selected;
}

tr:hover {
    background-color: $color-hover;
}

tr.clickable {
    cursor: pointer;
}
}






<div className={"table data" + (isScrolledX ? " scrolled-x" : "")} >
<table {...getTableProps()}>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
 </tbody>
 </table>
 </div>