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

我需要添加粘性标题到我的表，而且它应该有一个水平滚动条。对于水平滚动条，我使用了overflow-x:auto选项。但是，当我添加position:sticky时，它不会得到反射。当我移除overflow-x时，会反映sticky:位置，即即使向下滚动，列也会固定。 我需要有两个水平滚动条以及表头应该是可见的，即使当我垂直或水平滚动。如何做到这一点

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>

.table.data{
宽度：100%；
溢出-x：自动；
空白：预包装；
td，th{
填充物：2px 5px；
}
tr{
运输署{
.表格组{
保证金：0；
标签{
显示：块；
保证金：0；
}
}
}
}
th{
z指数：1；
垂直对齐：底部对齐；
垫面：5px；
位置：粘性；
顶部：-1px；
背景色：$彩色内容背景；
输入[type='text']{
宽度：100%；
}
}
th，td{
边框顶部：1px纯色$边框颜色；
}
tr:n个孩子（偶数）{
背景颜色：$选择的颜色；
}
tr：悬停{
背景色：$彩色悬停；
}
可点击{
光标：指针；
}
}