垂直 - 具有固定列的水平滚动 HTML 表格

【问题标题】：Vertical - Horizontal Scrolling HTML Table with fixed columns垂直 - 具有固定列的水平滚动 HTML 表格
【发布时间】：2017-07-31 16:20:45
【问题描述】：

我创建了一个带有垂直和水平滚动的 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 列并同时提供垂直和水平滚动的解决方案/指针？

【问题讨论】：

  • 如何实现什么修复？你必须更具体。
  • Fix columns in horizontal scrolling的可能重复
  • @sauntimo 如果你把它放在一个高度上，解决方案垂直滚动就会被折腾。 :)

标签： javascript jquery html css


【解决方案1】：

通过使用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>

【讨论】：

  • 感谢您的尝试，但它会使水平行对齐和固定标题脱离网格。
  • 我真的不明白你的意思。不过祝你好运！您也许可以使用position: absolute 做一些可行的事情。
【解决方案2】：
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-10-11
  • 2014-01-19
  • 2011-01-12
  • 2019-03-27
  • 2012-07-04
  • 2017-11-16
  • 2013-05-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode