Js使用scrollTop，thead边框消失了

时间：2018-09-06 02:46:30

标签： javascript jquery css

我使用此代码来修复我的剧集：

   document.getElementById("table_search").addEventListener("scroll", function(){
           var translate = "translate(0,"+this.scrollTop+"px)";
           this.querySelector("thead").style.transform = translate;
        });

整个code。 enter image description here

但是当我使用滚动条时，thead边框消失了，为什么？ enter image description here

1 个答案:

答案 0 :(得分：2)

thead边框消失了，因为您设置了border-collapse: collapse;，这意味着表格单元格具有共享的边框。换句话说，边界不属于翻译后的单元格。

要解决此问题，您可以注释掉border-collapse: collapse;或将其替换为border-collapse: seperate;。在这种情况下，这两个选项的作用相同。

document.getElementById("table_search").addEventListener("scroll", function() {
  var translate = "translate(0," + this.scrollTop + "px)";
  this.querySelector("thead").style.transform = translate;
});
#table_search th {
  background-color: rgb(235, 235, 228);
}

span {
  border-radius: 4px;
}

#messageDiv {
  margin-top: 5px;
  margin-bottom: 5px;
}

#inner_search {
  height: 700px;
  /* 	overflow:auto; */
}

#table_search {
  height: 700px;
  display: block;
  overflow: auto;
  /*     width: 100%; */
  /*border-collapse: collapse;*/  /* Comment out this line */
  border-collapse: seperate; /* Or replace with this line*/
  border-spacing: 0;
  border: none;
}

#maker_radio,
#vendor_radio {
  margin: 2px;
}

#table_search th {
  vertical-align: middle;
  font-weight: normal;
}

#table_search tbody td {
  vertical-align: middle;
}

#div_search {
  margin-right: 10px;
  border-color: #9ebdea;
}

#myModalLabel {
  font-weight: bold;
}

#span_buyer,
#span_div_cd,
#span_plan_title,
#span_vendorgroupcd,
#span_rebate_type,
#span_rebate_pattern,
#span_rebate_item,
#span_rebate_reason,
#span_contract_period,
#span_approval_id {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  line-height: 25px;
  height: 28px;
  width: 150px;
}

.disabledItemBgColor {
  background-color: rgb(235, 235, 228);
}

#select_buyer_cd {
  width: 200px;
  height: 25px;
  display: inline-block;
}

#select_div_cd {
  width: 200px;
  height: 25px;
  display: inline-block;
}

#plan_title,
#rebate_reason0 {
  width: 350px;
}

#select_vendorgroupcd {
  width: 200px;
  height: 25px;
  display: inline-block;
}

#select_rebate_type {
  width: 200px;
  height: 25px;
  display: inline-block;
}

#select_rebate_pattern {
  width: 200px;
  height: 25px;
  display: inline-block;
}

#select_rebate_item {
  width: 200px;
  height: 25px;
  display: inline-block;
}

#select_rebate_reason {
  width: 200px;
  height: 25px;
  display: inline-block;
}

#select_approval_id {
  width: 200px;
  height: 25px;
  display: inline-block;
}

.every_row {
  margin: 10px 10px 10px 20px;
}

.newstyle {
  width: 220px;
}

.input-box {
  position: relative;
}
<html>

<head></head>

<body>
  <div id="main">
    <div id="btn_group">
      <button id="mainBtnClear" class="btn btnNormal btn-primary">クリア</button>
      <button id="mainBtnSearch" class="btn btnNormal btn-primary" data-toggle="modal" data-target="#divModal">検索</button>
    </div>
    <div id="messageDiv" class="errfont"></div>
    <div id="div_search" class="panel panel-primary">
      <div id="inner_search" class="panel-body">
        <table id="table_search" border="1" class="table table-bordered text-right">
          <thead id="tbHead">
            <tr class="table-thead-tr">
              <th class="text-center" width="150px">ディビジョン</th>
              <th class="text-center" width="150px">担当者</th>
              <th class="text-center" width="300px">企画名</th>
              <th class="text-center" width="250px">取引先グループ</th>
              <th class="text-center" width="150px">ステータス</th>
              <th class="text-center" style="display:none;"></th>
            </tr>
          </thead>
          <tbody id="tbBody" style="overflow:auto;">
            <tr>
              <td class="text-left" width="150px">22<br />H&amp;B</td>
              <td class="text-left" width="150px">1510<br />aaabbbccc</td>
              <td class="text-left" width="300px">test20180814_6</td>
              <td class="text-left" width="250px">10000000<br /></td>
              <td class="text-center" width="150px">作成中 </td>
              <td class="text-left contractNO" style="display:none;">201808000015100015</td>
            </tr>
            <tr>
              <td class="text-left" width="150px">1<br />ホームケア</td>
              <td class="text-left" width="150px">1510<br />aaabbbccc</td>
              <td class="text-left" width="300px">test20180814_3</td>
              <td class="text-left" width="250px">10000000<br /></td>
              <td class="text-center" width="150px">作成中 </td>
              <td class="text-left contractNO" style="display:none;">201808000015100012</td>
            </tr>
            <tr>
              <td class="text-left" width="150px">1<br />ホームケア</td>
              <td class="text-left" width="150px">1510<br />aaabbbccc</td>
              <td class="text-left" width="300px">test20180814_2</td>
              <td class="text-left" width="250px">10000000<br /></td>
              <td class="text-center" width="150px">作成中 </td>
              <td class="text-left contractNO" style="display:none;">201808000015100010</td>
            </tr>
            <tr>
              <td class="text-left" width="150px">1<br />ホームケア</td>
              <td class="text-left" width="150px">1510<br />aaabbbccc</td>
              <td class="text-left" width="300px">peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter20180815peter</td>
              <td class="text-left" width="250px">10000000<br /></td>
              <td class="text-center" width="150px">作成中 </td>
              <td class="text-left contractNO" style="display:none;">201808000015100019</td>
            </tr>
            <tr>
              <td class="text-left" width="150px">5<br />インナー</td>
              <td class="text-left" width="150px">1510<br />aaabbbccc</td>
              <td class="text-left" width="300px">ああああ</td>
              <td class="text-left" width="250px">10000001<br />BlancdeBlanc</td>
              <td class="text-center" width="150px">作成中 </td>
              <td class="text-left contractNO" style="display:none;">201808000015100017</td>
            </tr>
            <tr>
              <td class="text-left" width="150px">4<br />家電</td>
              <td class="text-left" width="150px">1510<br />aaabbbccc</td>
              <td class="text-left" width="300px">単体テスト保存①</td>
              <td class="text-left" width="250px">10000003<br />CIE</td>
              <td class="text-center" width="150px">作成中 </td>
              <td class="text-left contractNO" style="display:none;">201808000015100008</td>
            </tr>
            <tr>
              <td class="text-left" width="150px">6<br />アウター</td>
              <td class="text-left" width="150px">1510<br />aaabbbccc</td>
              <td class="text-left" width="300px">単体テスト02</td>
              <td class="text-left" width="250px">10000042<br />アイリン</td>
              <td class="text-center" width="150px">作成中 </td>
              <td class="text-left contractNO" style="display:none;">201808000015100011</td>
            </tr>
            <tr>
              <td class="text-left" width="150px">1<br />ホームケア</td>
              <td class="text-left" width="150px">1510<br />aaabbbccc</td>
              <td class="text-left" width="300px">ｈｈｈ</td>
              <td class="text-left" width="250px">10000000<br /></td>
              <td class="text-center" width="150px">削除</td>
              <td class="text-left contractNO" style="display:none;">201808000015100018</td>
            </tr>
            <tr>
              <td class="text-left" width="150px">1<br />ホームケア</td>
              <td class="text-left" width="150px">1510<br />aaabbbccc</td>
              <td class="text-left" width="300px">test20180814_4</td>
              <td class="text-left" width="250px">10000000<br /></td>
              <td class="text-center" width="150px">作成中 </td>
              <td class="text-left contractNO" style="display:none;">201808000015100013</td>
            </tr>
            <tr>
              <td class="text-left" width="150px">1<br />ホームケア</td>
              <td class="text-left" width="150px">1510<br />aaabbbccc</td>
              <td class="text-left" width="300px">test20180814_5</td>
              <td class="text-left" width="250px">10000000<br /></td>
              <td class="text-center" width="150px">作成中 </td>
              <td class="text-left contractNO" style="display:none;">201808000015100014</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

</html>

相关问题
最新问题