垂直-具有固定列的水平滚动HTML表
[英]Vertical - Horizontal Scrolling HTML Table with fixed columns
问题描述
I have created a html table with vertical and Horizontal scrolling. 
我用垂直和水平滚动创建了一个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>
But with above html script how to achieve the fixing of first five columns in table? 但是用上面的html脚本如何实现表格中前五列的固定？ If I put something like this as below my vertical scrolling goes way off: 如果我在下面放这样的东西，我的垂直滚动会变远：
.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;
}
Anybody has a solution/pointers on how to fix first 5 columns and have both vertical and horizontal scroll available? 任何人都有关于如何固定前5列并具有垂直和水平滚动的解决方案/指针？
2 个解决方案
解决方案1
0 2017-07-31 16:50:48
I had a really quick go at this by using position: absolute and offsetting with different amounts of left for different columns. 通过使用position: absolute我很快就可以做到这一点position: absolute和偏移量，不同列的left量不同。 You could develop this a bit and probably make something work. 您可以对此进行一些开发，并可能使某些工作生效。 But, the conclusion I came to was that if I was doing this, I would consider 但是，我得出的结论是，如果我这样做，我会考虑
(a) having the fixed section as a different table element and constructing the mark up separately (I'm assuming you're using a function to build this mark up?) （a）将固定部分作为不同的表格元素并分别构造标记（我假设您正在使用函数来构建此标记？）
(b) presenting your data differently - a table with that many columns is going to be really hard for anyone to actually use. （b）以不同的方式显示您的数据-任何人都很难真正使用包含这么多列的表。 Perhaps you don't need to see all the columns all the time? 也许您不需要一直查看所有列？ Perhaps you could present the data differently, say in collapsible sections or something - It's difficult to know what exactly to suggest given I don't know your use case, but I wouldn't want to have to use a table that wide for anything. 也许您可以用不同的方式呈现数据，例如在可折叠的部分或类似的内容中表达-鉴于我不知道您的用例，很难知道确切的建议，但是我不想使用一个宽度如此大的表。
#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>
解决方案2
0 已采纳 2017-08-01 09:07:41
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
具有垂直和水平滚动的HTML表 - HTML table with vertical and horizontal scrolling
具有水平和垂直滚动主体的固定表头 - Fixed table header with horizontal AND vertical scrolling body
固定列的响应式水平滚动表 - Responsive horizontal scrolling table with fixed columns
动态表格垂直和水平滚动粘性标题和固定列 - Dynamic Table Vertical & Horizontal scrolling sticky header and fixed column
在AngularJS指令中使用水平和垂直滚动粘贴表格列和标题 - Sticked table columns and header with horizontal and vertical scrolling in AngularJS directive
如何在标题固定的情况下水平和垂直滚动表中的列 - How to move columns in a table with horizontal and vertical scroll with the header fixed
如何模拟水平滚动的固定定位但保持正常的垂直滚动？ （表格的粘性列） - How can I mimic fixed positioning for horizontal scrolling but maintain normal vertical scrolling? (Sticky column for a table)
具有固定标题和第一列的水平和垂直滚动 - Horizontal and vertical scrolling with fixed header and first column
具有冻结（可滚动）的垂直和水平行/列的HTML表 - HTML Table with frozen (scrollable) vertical and horizontal rows/columns
向左或向右滚动时，固定桌子上有垂直滚动但没有水平滚动 - having vertical scroll but no horizontal scroll on fixed table when scrolling to left or right
相关标签