Html 同步X&;Y轴滚动在firefox上不工作

Html 同步X&;Y轴滚动在firefox上不工作,html,css,firefox,cross-browser,Html,Css,Firefox,Cross Browser,以下代码在chrome、opera和safari中的行为符合我的要求,但在firefox中则不符合我的要求: 我有一张桌子在x轴上溢出。我希望x-scrollbar附在桌子上,而不是附在身体上 我希望标题在表格的x轴上保持不变 我无法在不同的容器上找到正确的css溢出设置,以便允许在所有浏览器上同时滚动X&Y轴 html: 使用带有数字滚动传感器的触控板或鼠标时最容易注意到这一点,任何关于当前显示的css设置由于某种原因会打开什么的想法,为了从x滚动到y滚动,或者其他方式,需要移动鼠标至少1像

以下代码在chrome、opera和safari中的行为符合我的要求,但在firefox中则不符合我的要求:

我有一张桌子在x轴上溢出。我希望x-scrollbar附在桌子上,而不是附在身体上

我希望标题在表格的x轴上保持不变

我无法在不同的容器上找到正确的css溢出设置,以便允许在所有浏览器上同时滚动X&Y轴

html:


使用带有数字滚动传感器的触控板或鼠标时最容易注意到这一点,任何关于当前显示的css设置由于某种原因会打开什么的想法,为了从x滚动到y滚动,或者其他方式,需要移动鼠标至少1像素
<body>
    <div class="container">
        <h1>Title</h1>
        <div>
            <div>
                <div class="table-responsive">
                    <table class="superResponsive">
                          <tr>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>    
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>    
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>    
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>    
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>    
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                            <td>Jill</td>
                            <td>Smith</td>      
                            <td>50</td>
                          </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
body{
    white-space:nowrap;
}

.container{
    overflow: hidden;
    position: relative;
}

.table-responsive{
    overflow-x: auto;

}

.superResponsive{
    border-collapse: collapse;
    color: #0887A7!important;
    white-space: nowrap;
    width: 100%!important;
}

.superResponsive td{
    border: 1px solid lightBlue;
    vertical-align: top;
    position: relative;
}