垂直-具有固定列的水平滾動HTML表
[英]Vertical - Horizontal Scrolling HTML Table with fixed columns
問題描述
我用垂直和水平滾動創建了一個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 個解決方案
解決方案1
0 2017-07-31 16:50:48
通過使用position: absolute我很快就可以做到這一點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>
解決方案2
0 已采納 2017-08-01 09:07:41
在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)
具有凍結（可滾動）的垂直和水平行/列的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
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.