Javascript - 滚动事件停止元素滚动[关闭]

Question

我这里有一支代码笔 - https://codepen.io/anon/pen/JLaqLz

它是一个可以向左/向右和向上/向下滚动的表格。

向上/向下滚动时，我希望标题保持粘性。

这个简单的 javascript 是我发现的最好的方法。

标题有一个底部的边框，当内容滚动时应该是粘性的。

我以为我可以在滚动时在 javascriot 中使用 css 设置边框，但它似乎破坏了滚动

谁能看到边框滚动的原因以及如何滚动。

document.getElementById('table').addEventListener("scroll", function () {
  var translate = "translate(0," + this.scrollTop + "px)";
  var myElements = this.querySelectorAll("thead");
  //myElements.style.border = '2px solid red';
  for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.transform=translate;
  }
});

Answer 1

根据这个答案td border disappears when applying transform translate，问题在于表格上的边框是如何处理的。

表格会合并单元格上的边框，因此当thead 的border-bottom 属性实际上与底部单元格共享时。

上述答案建议使用border-collapse: separate;，但在您的情况下，您可能会使用outline 而不是border。

document.getElementById('table').addEventListener("scroll", function () {
  var translate = "translate(0," + this.scrollTop + "px)";
  var myElements = this.querySelectorAll("thead");
  //myElements.style.border = '2px solid red';
  for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.transform=translate;
  }
});

body{
  background: grey;
  font-family: sans-serif;
}
.page{
  background: white;
  width: 1200px;
  margin: 0 auto;
}
.table-con{
  overflow: scroll;
  max-width: 1200px;
  height: 500px;
} 

table{
  /*table-layout: fixed;*/
  border-collapse: collapse; 
  width: 1500px;
}

thead th:first-child{
  width: 20px;
  padding: 0;
}

th{
  text-align: left;
}

thead{
  background: white;
  outline: 3px solid red;
}

tbody td{
  border-bottom: 1px solid #aaa;
}

tbody tr:nth-child(even) td:not(:first-child){
  background: yellow;
}

tbody td:first-child{
  background: none;
  border: none;
  padding: 0;
}

th, td{
  padding: 10px 5px;
}

<div class="page">
  <div class="table-con" id="table">
<!--     <div class="white-block"></div>
    <div class="white-block white-block-1"></div> -->
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
          <th>Header 5</th>
          <th>Header 6</th>
          <th>Header 7</th>
          <th>Header 8</th>
          <th>Header 9</th>
        </tr>
      </thead>  
      <tbody>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
      </tbody>
    </table>
  </div> 
</div>  

Answer 2

我将thead样式改为

thead{
      background-color: red;
      background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Solid_white.svg/2000px-Solid_white.svg.png');
      background-size: 100% 96%;
      background-repeat: no-repeat;
}

document.getElementById('table').addEventListener("scroll", function () {
  var translate = "translate(0," + this.scrollTop + "px)";
  var myElements = this.querySelectorAll("thead");
  //myElements.style.border = '2px solid red';
  for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.transform=translate;
  }
});

body{
  background: grey;
  font-family: sans-serif;
}
.page{
  background: white;
  width: 1200px;
  margin: 0 auto;
}
.table-con{
  overflow: scroll;
  max-width: 1200px;
  height: 500px;
} 

table{
  /*table-layout: fixed;*/
  border-collapse: collapse; 
  width: 1500px;
}

thead th:first-child{
  width: 20px;
  padding: 0;
  
}

th{
  text-align: left;
}

thead{
   background-color: red;
  background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Solid_white.svg/2000px-Solid_white.svg.png');
     background-size: 100% 96%;
    background-repeat: no-repeat;

 
}

tbody td{
  border-bottom: 1px solid #aaa;
}

tbody tr:nth-child(even) td:not(:first-child){
  background: yellow;
}

tbody td:first-child{
  background: none;
  border: none;
  padding: 0;
}

th, td{
  padding: 10px 5px;
}

<div class="page">
  <div class="table-con" id="table">
<!--     <div class="white-block"></div>
    <div class="white-block white-block-1"></div> -->
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
          <th>Header 5</th>
          <th>Header 6</th>
          <th>Header 7</th>
          <th>Header 8</th>
          <th>Header 9</th>
        </tr>
      </thead>  
      <tbody>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr><tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
      </tbody>
    </table>
  </div> 
</div>  

更新的codepen：https://codepen.io/anon/pen/Brqyxg