垂直 - 水平滚动HTML表，包含固定列

时间：2017-07-31 16:20:46

标签： javascript jquery html css

我创建了一个带垂直和水平滚动的html表。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

$(document).ready(function(){

});
</script>
<style>
div #sample.tableContainer {
    clear: both;
    height: 360px;
    overflow: auto;
    width: 600px;
}
/* define width of table. Add 16px to width for scrollbar.           */
 html>body div.tableContainer table {
    width: 600px;
}
html>body thead.fixedHeader tr {
    display: block;
    padding-right: 17px;
}

thead.fixedHeader th {
    background: #C96;
    font-weight: normal;
    text-align: center;
    border:1px solid;
    min-width:100px;


}
thead.fixedHeader {
    color: #000;
    display: block;
    text-decoration: none;
    width: 100%;
    border:1px solid;

}
html>body tbody.scrollContent {
    display: block;
    height: 200px;
    overflow: auto;
    border:1px solid;
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
    border:1px solid;
    min-width:100px;
}
tbody.scrollContent tr.alternateRow td {
    border:1px solid;
}
html>body thead.fixedHeader th {
    width: 60px;
}
html>body tbody.scrollContent td {
    width: 60px;
}
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

</style>
</head>
<body>
<div id ="sample" class="fixedColumns" style="width=600px;overflow:auto">
<table style="font-size:13px" id="data"  cellpadding="2" class="scrollTable">
    <thead style="background:#e2e2e2" align="center" class="fixedHeader">
        <tr>
            <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>
            <th>Header 10</th>
            <th>Header 11</th>
            <th>Header 12</th>
            <th>Header 13</th>
            <th>Header 14</th>
            <th>Header 15</th>
            <th>Header 16</th>
            <th>Header 17</th>
            <th>Header 18</th>
            <th>Header 19</th>
            <th>Header 20</th>
            <th>Header 21</th>
            <th>Header 22</th>
            <th>Header 23</th>
            <th>Header 24</th>
            <th>Header 25</th>
            <th>Header 26</th>
            <th>Header 27</th>
            <th>Header 28</th>
            <th>Header 29</th>
        </tr>
    </thead>
    <tbody align="center" class="scrollContent">
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
            <td>Data 10</td>
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
            <td>Data 16</td>
            <td>Data 17</td>
            <td>Data 18</td>
            <td>Data 19</td>
            <td>Data 20</td>
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
            <td>Data 26</td>
            <td>Data 27</td>
            <td>Data 28</td>
            <td>Data 29</td>
        </tr>
    </tbody>
</table>
</div>
</body>
</html>

但是用上面的html脚本如何实现表中前五列的修复？ 如果我把这样的东西放在下面，我的垂直滚动就会消失：

.fixedColumns  {
    width: 100%;
    overflow: auto;
    margin-left: 500px;
}

.fixedColumns > table > * > tr > th:nth-child(1),
.fixedColumns  > table > * > tr > td:nth-child(1){
    position: absolute;
    width: 0px;
    margin-left: -500px;
}

任何人都有关于如何修复前5列并同时提供垂直和水平滚动的解决方案/指针？

2 个答案:

答案 0 :(得分：0)

通过使用position: absolute并使用不同数量的left对不同的列进行抵消，我非常快速地进行了此操作。你可以稍微开发一下这可能会让事情变得有效。但是，我得出的结论是，如果我这样做，我会考虑

（a）将固定部分作为不同的表格元素并单独构建标记（我假设您正在使用函数来构建此标记？）

（b）以不同的方式呈现您的数据 - 一个包含许多列的表对任何人来说都很难实际使用。也许您不需要一直看到所有列？也许你可以用不同的方式呈现数据，比如在可折叠的部分或者某些东西中 - 由于我不知道你的用例，很难知道究竟建议了什么，但我不想要使用任何广泛的表格。 

#sample {
  position: static;
  clear: both;
  height: 360px;
  overflow: auto;
  width: 600px;
  margin-left: 540px;
}


/* define width of table. Add 16px to width for scrollbar.           */

html>body div.tableContainer table {
  width: 600px;
}

html>body thead.fixedHeader tr {
  display: block;
  padding-right: 17px;
}

thead.fixedHeader th {
  background: #C96;
  font-weight: normal;
  text-align: center;
  border: 1px solid;
  min-width: 100px;
}

thead.fixedHeader {
  color: #000;
  display: block;
  text-decoration: none;
  width: 100%;
  border: 1px solid;
}

html>body tbody.scrollContent {
  display: block;
  /* height: 200px; */
  overflow-x: scroll;
  border: 1px solid;
}

tbody.scrollContent td,
tbody.scrollContent tr.normalRow td {
  border: 1px solid;
  min-width: 100px;
}

tbody.scrollContent tr.alternateRow td {
  border: 1px solid;
}

html>body thead.fixedHeader th {
  width: 60px;
}

html>body tbody.scrollContent td {
  width: 60px;
}

tr:nth-child(even) {
  background: #CCC
}

tr:nth-child(odd) {
  background: #FFF
}

.abs {
  position: absolute;
}

.abs.a_one{
  left: 0;
}

.abs.a_two {
  left: 110px;
}

.abs.a_three {
  left: 220px;
}

.abs.a_four {
  left: 330px;
}

.abs.a_five {
  left: 440px;
}
<div id="sample" class="fixedColumns">
  <table style="font-size:13px" id="data" cellpadding="2" class="scrollTable">
    <thead style="background:#e2e2e2" align="center" class="fixedHeader">
      <tr>
        <th class="abs a_one">Header 1</th>
        <th class="abs a_two">Header 2</th>
        <th class="abs a_three">Header 3</th>
        <th class="abs a_four">Header 4</th>
        <th class="abs a_five">Header 5</th>
        <th>Header 6</th>
        <th>Header 7</th>
        <th>Header 8</th>
        <th>Header 9</th>
        <th>Header 10</th>
        <th>Header 11</th>
        <th>Header 12</th>
        <th>Header 13</th>
        <th>Header 14</th>
        <th>Header 15</th>
        <th>Header 16</th>
        <th>Header 17</th>
        <th>Header 18</th>
        <th>Header 19</th>
        <th>Header 20</th>
        <th>Header 21</th>
        <th>Header 22</th>
        <th>Header 23</th>
        <th>Header 24</th>
        <th>Header 25</th>
        <th>Header 26</th>
        <th>Header 27</th>
        <th>Header 28</th>
        <th>Header 29</th>
      </tr>
    </thead>
    <tbody align="center" class="scrollContent">
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
      <tr>
        <td class="abs a_one">Data 1</td>
        <td class="abs a_two">Data 2</td>
        <td class="abs a_three">Data 3</td>
        <td class="abs a_four">Data 4</td>
        <td class="abs a_five">Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
        <td>Data 21</td>
        <td>Data 22</td>
        <td>Data 23</td>
        <td>Data 24</td>
        <td>Data 25</td>
        <td>Data 26</td>
        <td>Data 27</td>
        <td>Data 28</td>
        <td>Data 29</td>
      </tr>
    </tbody>
  </table>
</div>

答案 1 :(得分：0)

这家伙有@ http://www.jqueryscript.net/table/jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll.html

的解决方案
相关问题
最新问题