Javascript - 滚动事件停止元素滚动

时间:2018-04-05 14:18:51

标签: javascript css

我这里有一个代码笔 - 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;
  }
});

2 个答案:

答案 0 :(得分:1)

我将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>  

更新的代码集:https://codepen.io/anon/pen/Brqyxg

答案 1 :(得分:1)

根据这个答案td border disappears when applying transform translate,问题来自于如何在表格上处理边界。

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

上述回答建议使用border-collapse: separate;,但在您的情况下,您可能会使用outline代替border

&#13;
&#13;
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;
  }
});
&#13;
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;
}
&#13;
<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>  
&#13;
&#13;
&#13;