修复垂直标题中的第一行和第一列 JQuery DataTable

Fix both first row and first column in a vertical header JQuery DataTable

提问人：Aishwarya Shiva 提问时间：11/14/2023 更新时间：11/16/2023 访问量：59

问：

赏金将在 3 天后到期。这个问题的答案有资格获得 +200 声望赏金。艾西瓦娅·湿婆（Aishwarya Shiva）希望引起人们对这个问题的更多关注。

我在这里的Datatables中实现了垂直标题流：https://jsfiddle.net/2unr54zc/

我已经修复了水平滚动的列，但我发现垂直滚动时很难修复前两行，因为它们在不同的 TR 中是不同的 TD/TH。

我怎样才能做到这一点？请帮忙。

代码如下：

.dataTable {
  display: block;
  width: 100%;
}
.dataTable thead {
  display: block;
  position: relative;
}
.dataTable thead tr {
  display: flex;
}
.dataTable thead th {
  flex-grow: 1;
  position: absolute;
  top: 100%;
  z-index: 9;
  width: 140px !important;
  left: 0;
  height: 80px;
  box-sizing: border-box;
  color: #fff;
  border: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  background-color: #65696b;
}
.dataTable thead th:nth-child(2) {
  top: calc(100% + 80px * 1);
}
.dataTable thead th:nth-child(3) {
  top: calc(100% + 80px * 2);
}
.dataTable thead th:nth-child(4) {
  top: calc(100% + 80px * 3);
}
.dataTable thead th:nth-child(5) {
  top: calc(100% + 80px * 4);
}
.dataTable thead th:nth-child(6) {
  top: calc(100% + 80px * 5);
}
.dataTable thead th:nth-child(7) {
  top: calc(100% + 80px * 6);
}
.dataTable thead th:nth-child(8) {
  top: calc(100% + 80px * 7);
}
.dataTable thead th:nth-child(9) {
  top: calc(100% + 80px * 8);
}
.dataTable thead th:nth-child(10) {
  top: calc(100% + 80px * 9);
}
.dataTable thead th:nth-child(11) {
  top: calc(100% + 80px * 10);
}

.dataTable tbody {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  padding-left: 140px;
  min-height: calc(80px * 10 + 18px);
}
.dataTable tbody tr {
  display: block;
  box-sizing: border-box;
}
.dataTable tbody td {
  display: block;
  height: 80px;
  width: 100px;
  position: relative;
  box-sizing: border-box;
}

.dataTable tbody td:not(:last-child)::before {
  border-bottom: 1px solid #f2e7e7f5;
}
.dataTable thead th:first{
  position:fixed
}
.dataTable tbody td:first{
  position:fixed
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-pageLoadMore/1.0.2/js/dataTables.pageLoadMore.min.js"></script>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Country</th>
      <th>Town</th>
      <th>School</th>
      <th>Degree</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>


  </tbody>
</table>
<script>
$(function() {$('#example').DataTable();});
</script>

javascript html jquery css 数据表

评论

0赞 Alive to die - Anant 11/22/2023
无法理解问题

答：

0赞 fen1x 11/14/2023 #1

问题出在 和 中。box-sizingthtd

值有 2 个来源：自定义 css 和 .box-sizingdatatables.min.css

在：datatables.min.css

table.dataTable, table.dataTable th, table.dataTable td {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

在自定义 css 中：

.dataTable thead th {
  box-sizing: border-box;
  /* other properties */
}
.dataTable tbody td {
  box-sizing: border-box;
  /* other properties */
}

选择器和具有相同的特异性，这意味着级联中较低的样式将设置 的值为 。table.dataTable th.dataTable thead thbox-sizing

在小提琴中自定义 css 在后面，在 SO 片段中自定义 css 在后面。datatables.min.cssdatatables.min.css

你需要的是 ，所以要么确保你的自定义 css 在你的代码中较低，要么使选择器更具体。box-sizing: border-box;

在下面的示例中，我添加了类以使自定义 css 的特异性更高，因此样式的顺序无关紧要。.vertical

.dataTable.vertical {
  display: block;
  width: 100%;
}
.dataTable.vertical thead {
  display: block;
  position: relative;
}
.dataTable.vertical thead tr {
  display: flex;
}
.dataTable.vertical thead th {
  flex-grow: 1;
  position: absolute;
  top: 100%;
  z-index: 9;
  width: 140px !important;
  left: 0;
  height: 80px;
  box-sizing: border-box;
  color: #fff;
  border: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  background-color: #65696b;
}
.dataTable.vertical thead th:nth-child(2) {
  top: calc(100% + 80px * 1);
}
.dataTable.vertical thead th:nth-child(3) {
  top: calc(100% + 80px * 2);
}
.dataTable.vertical thead th:nth-child(4) {
  top: calc(100% + 80px * 3);
}
.dataTable.vertical thead th:nth-child(5) {
  top: calc(100% + 80px * 4);
}
.dataTable.vertical thead th:nth-child(6) {
  top: calc(100% + 80px * 5);
}
.dataTable.vertical thead th:nth-child(7) {
  top: calc(100% + 80px * 6);
}
.dataTable.vertical thead th:nth-child(8) {
  top: calc(100% + 80px * 7);
}
.dataTable.vertical thead th:nth-child(9) {
  top: calc(100% + 80px * 8);
}
.dataTable.vertical thead th:nth-child(10) {
  top: calc(100% + 80px * 9);
}
.dataTable.vertical thead th:nth-child(11) {
  top: calc(100% + 80px * 10);
}

.dataTable.vertical tbody {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  padding-left: 140px;
  min-height: calc(80px * 10 + 18px);
}
.dataTable.vertical tbody tr {
  display: block;
  box-sizing: border-box;
}
.dataTable.vertical tbody td {
  display: block;
  height: 80px;
  width: 100px;
  position: relative;
  box-sizing: border-box;
}

.dataTable.vertical tbody td:not(:last-child)::before {
  border-bottom: 1px solid #f2e7e7f5;
}
.dataTable.vertical thead th:first{
  position:fixed
}
.dataTable.vertical tbody td:first{
  position:fixed
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-pageLoadMore/1.0.2/js/dataTables.pageLoadMore.min.js"></script>
<table id="example" class="display vertical" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Country</th>
      <th>Town</th>
      <th>School</th>
      <th>Degree</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>

    </tr>


  </tbody>
</table>
<script>
$(function() {$('#example').DataTable();});
</script>

评论

0赞 Aishwarya Shiva 11/16/2023
不完全是我需要的。如果垂直滚动，我想修复前两行。

上一个：格式化 highcharts.com 库的数据表

下一个：向 Datatable 函数添加参数