Javascript 数据库Jquery-使用ScrollY时列标题未对齐_Javascript_Jquery_Html_Twitter Bootstrap_Datatables

Javascript 数据库Jquery-使用ScrollY时列标题未对齐

javascript jquery html twitter-bootstrap datatables

Javascript 数据库Jquery-使用ScrollY时列标题未对齐,javascript,jquery,html,twitter-bootstrap,datatables,Javascript,Jquery,Html,Twitter Bootstrap,Datatables,我正在使用jQuery的数据表和引导。所以我遇到的问题是，当我在“完成”和“死亡”选项卡之间切换时，“死亡”选项卡的列标题会聚集在左侧，直到我单击它们，然后它们会正确对齐。每当我刷新时就会发生这种情况。我尝试将CSS与overflow:auto一起使用，但这使我的整个面板都可以滚动，这是我不想要的。我希望在表格中滚动时标题保持固定。 <div class = 'row'> <div class='col-lg-11'> <div id="pane3"

我正在使用jQuery的数据表和引导。所以我遇到的问题是，当我在“完成”和“死亡”选项卡之间切换时，“死亡”选项卡的列标题会聚集在左侧，直到我单击它们，然后它们会正确对齐。每当我刷新时就会发生这种情况。我尝试将CSS与overflow:auto一起使用，但这使我的整个面板都可以滚动，这是我不想要的。我希望在表格中滚动时标题保持固定。

  <div class = 'row'>
  <div class='col-lg-11'>

  <div id="pane3" > 
  <ul class="nav nav-tabs">
    <li class="active">
      <a  href="#4a" data-toggle="tab">My Completed</a>
    </li>
    <li>
      <a  href="#4b" id="deadTab"  data-toggle="tab">Dead Requests</a>
    </li>

  </ul>
  <div class="tab-content">
      <div class='tab-pane active' id ="4a">
        <!-- <div id="" style=" width: 100%; position:relative; height:200px;"> -->
          <table id='completed' class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Req. #</th>
              <th>Project #</th>
              <th>Client Name</th>
              <th>Program</th>
              <th>Request Type</th>
              <th>Assignee</th>
              <th>Completed Date</th>
              <th>Clone</th>

            </tr>
          </thead>
          <tbody>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
          </tbody>
        </table>
      <!--   </div> -->
        </div>
          <div class='tab-pane' id ="4b">
         <!--  <div id="" style=" overflow:auto; position:relative; "> -->
            <table id='dead' class="table table-striped table-hover">
            <thead>
              <tr>
                <th>Req. #</th>
                <th>Project #</th>
                <th>Client Name</th>
                <th>Program</th>
                <th>Request Type</th>
                <th>Assignee</th>
                <th>Dead Date</th>
                <th>Restart</th>
              </tr>
            </thead>
            <tbody>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
          </tbody>
          </table>
         <!--  </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>








请求#
计划#
客户名称
节目
请求类型
受让人
完成日期
克隆
七月
杜利
john@e
john@e
john@e
july@example.com
6/12/2017
视图形式
七月
杜利
john@e
john@e
john@e
july@example.com
6/12/2017
视图形式
七月
杜利
john@e
john@e
john@e
july@example.com
6/12/2017
视图形式
七月
杜利
john@e
john@e
john@e
july@example.com
6/12/2017
视图形式
七月
杜利
john@e
john@e
john@e
july@example.com
6/12/2017
视图形式
七月
杜利
john@e
john@e
john@e
july@example.com
6/12/2017
视图形式
请求#
计划#
客户名称
节目
请求类型
受让人
死期
重新启动
七月
杜利
john@e
john@e
john@e
july@example.com
6/12/2017
视图形式
七月
杜利
john@e
john@e
john@e
july@example.com
6/12/2017
视图形式
七月
杜利
john@e
john@e
john@e
july@example.com
6/12/2017
视图形式
七月
杜利
john@e
john@e
john@e
july@example.com
6/12/2017
视图形式
七月
杜利
john@e
john@e
john@e
july@example.com
6/12/2017
视图形式
七月
杜利
john@e
john@e
john@e
july@example.com
6/12/2017
视图形式

  <div class = 'row'>
  <div class='col-lg-11'>

  <div id="pane3" > 
  <ul class="nav nav-tabs">
    <li class="active">
      <a  href="#4a" data-toggle="tab">My Completed</a>
    </li>
    <li>
      <a  href="#4b" id="deadTab"  data-toggle="tab">Dead Requests</a>
    </li>

  </ul>
  <div class="tab-content">
      <div class='tab-pane active' id ="4a">
        <!-- <div id="" style=" width: 100%; position:relative; height:200px;"> -->
          <table id='completed' class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Req. #</th>
              <th>Project #</th>
              <th>Client Name</th>
              <th>Program</th>
              <th>Request Type</th>
              <th>Assignee</th>
              <th>Completed Date</th>
              <th>Clone</th>

            </tr>
          </thead>
          <tbody>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
          </tbody>
        </table>
      <!--   </div> -->
        </div>
          <div class='tab-pane' id ="4b">
         <!--  <div id="" style=" overflow:auto; position:relative; "> -->
            <table id='dead' class="table table-striped table-hover">
            <thead>
              <tr>
                <th>Req. #</th>
                <th>Project #</th>
                <th>Client Name</th>
                <th>Program</th>
                <th>Request Type</th>
                <th>Assignee</th>
                <th>Dead Date</th>
                <th>Restart</th>
              </tr>
            </thead>
            <tbody>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
          </tbody>
          </table>
         <!--  </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


$（文档）.ready（函数（）{
$（“#已完成”）。数据表（{
“分页”：false，
//“fixedHeader”：正确，
“滚动”：“140px”，
“表格布局”：“固定”，
“columnDefs”：[
{“宽度”：60，“目标”：0}，
{“宽度”：60，“目标”：1}，
{“宽度”：60，“目标”：2}，
{“宽度”：60，“目标”：3}，
{“宽度”：90，“目标”：4}，
{“宽度”：90，“目标”：5}，
{“宽度”：90，“目标”：6}，
{“宽度”：90，“目标”：7}，
]
});
$（'#dead'）。数据表（{
“分页”：false，
“fixedHeader”：正确，
“滚动”：“140px”，
“表格布局”：“固定”，
“columnDefs”：[
{“宽度”：60，“目标”：0}，
{“宽度”：60，“目标”：1}，
{“宽度”：60，“目标”：2}，
{“宽度”：60，“目标”：3}，
{“宽度”：90，“目标”：4}，
{“宽度”：90，“目标”：5}，
{“宽度”：90，“目标”：6}，
{“宽度”：90，“目标”：7}，
]
//“表格布局”：“固定”
});
});

问题是您的其他选项卡被隐藏（

显示：无

）。在

dead

选项卡如下所示后，您可以初始化数据表：

  <div class = 'row'>
  <div class='col-lg-11'>

  <div id="pane3" > 
  <ul class="nav nav-tabs">
    <li class="active">
      <a  href="#4a" data-toggle="tab">My Completed</a>
    </li>
    <li>
      <a  href="#4b" id="deadTab"  data-toggle="tab">Dead Requests</a>
    </li>

  </ul>
  <div class="tab-content">
      <div class='tab-pane active' id ="4a">
        <!-- <div id="" style=" width: 100%; position:relative; height:200px;"> -->
          <table id='completed' class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Req. #</th>
              <th>Project #</th>
              <th>Client Name</th>
              <th>Program</th>
              <th>Request Type</th>
              <th>Assignee</th>
              <th>Completed Date</th>
              <th>Clone</th>

            </tr>
          </thead>
          <tbody>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
          </tbody>
        </table>
      <!--   </div> -->
        </div>
          <div class='tab-pane' id ="4b">
         <!--  <div id="" style=" overflow:auto; position:relative; "> -->
            <table id='dead' class="table table-striped table-hover">
            <thead>
              <tr>
                <th>Req. #</th>
                <th>Project #</th>
                <th>Client Name</th>
                <th>Program</th>
                <th>Request Type</th>
                <th>Assignee</th>
                <th>Dead Date</th>
                <th>Restart</th>
              </tr>
            </thead>
            <tbody>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
          </tbody>
          </table>
         <!--  </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

$（'#已完成'）。数据表({
“分页”：false，
//“fixedHeader”：正确，
“滚动”：“140px”，
“表格布局”：“固定”，
“columnDefs”：[{
“宽度”：60，
“目标”：0
},
{
“宽度”：60，
“目标”：1
},
{
“宽度”：60，
“目标”：2
},
{
“宽度”：60，
“目标”：3
},
{
“宽度”：90，
“目标”：4
},
{
“宽度”：90，
“目标”：5
},
{
“宽度”：90，
“目标”：6
},
{
“宽度”：90，
“目标”：7
},
]
});
$（'#deadTab'）.one（'show.bs.tab'，函数（e）{
$（'#dead'）。数据表({
“分页”：false，
“fixedHeader”：正确，
“滚动”：“140px”，
“表格布局”：“固定”，
“columnDefs”：[{
“宽度”：60，
“目标”：0
},
{
“宽度”：60，
“目标”：1
},
{
“宽度”：60，
“目标”：2
},
{
“宽度”：60，
“目标”：3
},
{
“宽度”：90，
“目标”：4
},
{
“宽度”：90，
“目标”：