Jquery 表的粘滞按钮宽度，位于页脚上方

我在一张桌子里有一个按钮，我想贴在屏幕的底部，当页脚出现在页脚上方时，我会在屏幕上滚动。按钮还必须与表格的宽度相匹配

我有一个按钮，当它出现时，它会粘在页面底部并位于页脚上方，但只有当它位于页脚时，它的宽度才能与表格匹配

.侧边栏{
高度：300px；
背景色：黑色；
}
.桌子{
高度：600px；
宽度：600px！重要；
背景颜色：灰色；
边缘底部：0px；
}
.页脚{
背景色：#26272b；
填充：45px 0 20px；
高度：40px；
宽度：100%；
}
.子btn固定{
位置：固定；
宽度：100%！重要；
保证金：自动；
左：0；
右：0；
底部：0；
高度：45px；
背景：红色中心顶部重复-x滚动；
盒影：0.10px rgba（0,0,0,0.2）；
z指数：1030；
边界：无；
}
边栏

单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
提交
$（“.sub btn fixed”）.css（{'width'：（$（“.table”）.width（）+'px'）}）；
函数checkOffset（）{
如果（$（'.sub btn fixed'）.offset（）.top+$（'.sub btn fixed'）.height（）>=
$（'.footer'）.offset（）.top-10）$（'.sub-btn-fixed'）.css（'position'，'absolute'）；
if（$（document）.scrollTop（）+window.innerHeight<$（'.footer'）.offset（）.top）$（'.sub btn fixed'）.css（'position'，'fixed'）；//向上滚动时恢复
}
$（文档）。滚动（函数（）{
checkOffset（）；
});

按钮应该是表格的宽度，但应该是屏幕的100%宽度，除非它位于页脚上方

---

JSFiddle对于这个问题：

删除

位置：固定来自
.sub btn fixed
CSS，如下所示：

.sidebar {
  height: 300px;
  background-color: black;
}
.table {
  height: 600px;
  width: 600px!important;
  background-color: grey;
  margin-bottom: 0px;
}

.footer {
  background-color:#26272b;
  padding:45px 0 20px;
  height: 40px;
  width: 100%;
}

.sub-btn-fixed {
    width: 100%!important;
    margin:auto; 
    left: 0;
    right: 0;
    bottom:0; 
    height: 45px;
    background: red center top repeat-x scroll;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 1030;
    border: none;
    }

此外，向HTML添加
colspan=“3”
属性，如下所示：


边栏

单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
提交

产生这个结果：
移除
位置：固定来自
.sub btn fixed
CSS，如下所示：

.sidebar {
  height: 300px;
  background-color: black;
}
.table {
  height: 600px;
  width: 600px!important;
  background-color: grey;
  margin-bottom: 0px;
}

.footer {
  background-color:#26272b;
  padding:45px 0 20px;
  height: 40px;
  width: 100%;
}

.sub-btn-fixed {
    width: 100%!important;
    margin:auto; 
    left: 0;
    right: 0;
    bottom:0; 
    height: 45px;
    background: red center top repeat-x scroll;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 1030;
    border: none;
    }

此外，向HTML添加
colspan=“3”
属性，如下所示：


边栏

单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
提交

产生这个结果：
谢谢@ekbrothers。我做了这些更改，最初在第一次滚动时它工作正常，但随后转到100%的屏幕宽度，直到完全滚动到页面底部。我正在寻找提交按钮总是100%宽度的表。谢谢@ekbrothers。我做了这些更改，最初在第一次滚动时它工作正常，但随后转到100%的屏幕宽度，直到完全滚动到页面底部。我正在寻找提交按钮总是100%的表宽。
<div class="container">

    <div class="row">
      <div class="col-md-3 col-sm-6 sidebar">
        <p>Sidebar</p>
      </div>
      <div class="col-md-9 col-sm-6 table">
        <table>
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
          </tr>
          <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
          </tr>
          <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
          </tr>
          <tr >
            <td colspan="3"><button class="sub-btn-fixed">Submit</button></td>
          </tr>        
        </table>

      </div>
    </div>

</div><!-- /container -->

<footer class="footer"></footer>

</body>