如何在向下滚动 DataTable 或常规表时修复标题？答案

【问题标题】：How to fix header on scroll down of DataTable or regular table?如何在向下滚动 DataTable 或常规表时修复标题？
【发布时间】：2021-06-09 05:55:36
【问题描述】：

我在我的代码中使用了数据表，但我正在尝试修复标题。我也尝试过使用数据表的fixHeader 功能，但没有正常工作。

<div class="table-responsive">
<table class="temp1 table table-striped mt-2 table-bordered" cellspacing="0" cellpadding="0" style="margin-bottom: 0px; margin-top: 0px;" role="grid"
aria-describedby="user-list-page-info" id="user-list-table">                          
      <thead class='headertbl'>
          <tr class="ligth" style="margin-left: 2px;">
            <th>&nbsp;</th>
            <th>Id_No</th>
            <th>updated_date</th>
            <th>estimated_date</th>
            <th>product_id</th>
            <th>product_name</th>
            <th>box_no</th>
            <th>color_code</th>
            <th>color_name</th>
            <th>size_code</th>
            <th>size_name</th>
            <th>childe_color</th>
            <th>remark</th>
            <th>arrival_date</th>
            <th>units</th>
            <th>quantity</th>
            <th>unit_price</th>
            <th>currency</th>
            <th>excahnge</th>
            <th>current_currency(JPY)</th>
            <th>Amount</th>
            <th>Insurance_cost</th>
            <th>Shipping costs</th>
            <th>custom rate</th>
            <th>Tariffs</th>
            <th>Purchase price</th>
            <th>&nbsp;</th>
          </tr>
      </thead>                                                                                                                               
    <tbody>
      <!-- first row -->
      <tr class="table-info" id="row2" >
        <td><input type="checkbox" class="checkbox-input"></td>
        <td>10001</td>
        <td>2021/04/10</td>
        <td>2021/04/20</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="text" class="form-control form-control-sm" id="num1" value="1,00,000" onfocusout="change()"></td>
        <td><input type="text" class="form-control form-control-sm" id="num2" value="3,00,000" onfocusout="change()"></td>
        <td></td>
        <td><input type="text" class="form-control form-control-sm" id="num3" value="10,000" onfocusout="change()"></td>
        <td></td>
        <td>
          <button type="button" class="btn btn-primary btn-sm">update</button>                              
            <button type="button" class="btn btn-primary btn-sm">cancel</button> 
          <button type="button" class="btn btn-primary btn-sm">confirm</button>                              
        </td>
      </tr>
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100310</td>
        <td></td>
        <td>A1</td>
        <td>IEB-010A</td>
        <td>abc</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/20</td>
        <td>3</td>
        <td><span id="test1">50</span></td>
        <td><span id="test2">120</span></td>
        <td>USD</td>
        <td><input type="text" class="form-control form-control-sm" id="test4" onfocusout="change()" value="105"></td>
        <td><span id="test3">6,30,000</span></td>
        <td><span id="per">94%</span></td>
        <td><span id="ans">93,750</span> </td>
        <td><span id="ans11">2,81,250</span></td>
        <td>3.80%</td>
        <td><span id="ans33">9612</span> </td>
        <td><span id="ans55">18,417</span></td>
        <td></td>
      </tr>
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100310</td>
        <td>15</td>
        <td>IEB011</td>
        <td>abc</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/20</td>
        <td>1</td>
        <td><span id="test5">10</span></td>
        <td><span id="test6">40</span></td>
        <td>USD</td>
        <td><input type="text" class="form-control form-control-sm" id="test7" onfocusout="change()" value="105"></td>
        <td><span id="test8">42,000</span></td>
        <td><span id="per2">6%</span></td>
        <td><span id="ans2">6,250</span></td>
        <td><span id="ans22">18,750</span></td>
        <td>2.30%</td>
        <td><span id="ans44">388</span></td>
        <td><span id="ans66">6,114</span></td>
        <td></td>
      </tr>
      <!-- second row -->
      <tr class="table-info" id="row2" >
        <td><input type="checkbox" class="checkbox-input"></td>
        <td>10001</td>
        <td>2021/04/10</td>
        <td>2021/04/20</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="text" class="form-control form-control-sm" id="num11" value="0" onfocusout="change2()"></td>
        <td><input type="text" class="form-control form-control-sm" id="num22" value="0" onfocusout="change2()"></td>
        <td></td>
        <td><input type="text" class="form-control form-control-sm" id="num33" value="0" onfocusout="change2()"></td>
        <td></td>
        <td>
          <button type="button" class="btn btn-primary btn-sm">update</button>                                                  
            <button type="button" class="btn btn-primary btn-sm">cancel</button> 
          <button type="button" class="btn btn-primary btn-sm">confirm</button>                                                  
        </td>
      </tr>
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100310</td>
        <td></td>
        <td>A1</td>
        <td>IEB-010A(HB)</td>
        <td>abc</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/20</td>
        <td>3</td>
        <td><span id="test01">50</span></td>
        <td><span id="test02">120</span></td>
        <td>USD</td>
        <td><input type="text" class="form-control form-control-sm" id="test04" onfocusout="change2()" value="105"></td>
        <td><span id="test03">6,30,000</span></td>
        <td><span id="per01">100%</span></td>
        <td><span id="ans01">0</span> </td>
        <td><span id="ans011">0</span></td>
        <td>3.80%</td>
        <td><span id="ans033">0</span> </td>
        <td><span id="ans055">12,600</span></td>
        <td></td>
      </tr>                                                                                                                                       
      <!-- third row -->
      <tr class="table-info" id="row2" >
        <td><input type="checkbox" class="checkbox-input"></td>
        <td>10003</td>
        <td>2021/04/10</td>
        <td>2021/04/20</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="text" class="form-control form-control-sm" id="no11" value="100000" onfocusout="onchange1()"></td>
        <td><input type="text" class="form-control form-control-sm" id="no22" value="0" disabled></td>
        <td></td>
        <td><input type="text" class="form-control form-control-sm" id="no33" value="0" style="visibility: hidden;"></td>
        <td></td>
        <td>
          <button type="button" class="btn btn-primary btn-sm">cancel</button>
          <button type="button" class="btn btn-primary btn-sm">confirm</button>
        </td>
      </tr>
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100311</td>
        <td></td>
        <td>A1</td>
        <td>IEB-010A(HB)</td>
        <td>abc</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/20</td>
        <td>3</td>
        <td><span id="test11">50</span></td>
        <td><span id="test22">120</span></td>
        <td>JPY</td>
        <td><input type="text" class="form-control form-control-sm" id="test44" onfocusout="onchange1()" value="1" disabled></td>
        <td><span id="test33">6,000</span></td>
        <td><span id="per11">94%</span></td>
        <td><span id="ans112">93,750</span> </td>
        <td><span id="ans111">0</span></td>
        <td>0</td>
        <td><span id="ans333">0</span> </td>
        <td><span id="ans555">120</span></td>
        <td></td>
      </tr>
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100311</td>
        <td>15</td>
        <td>IEB00011</td>
        <td>abc</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/15</td>
        <td>1</td>
        <td><span id="test55">10</span></td>
        <td><span id="test66">40</span></td>
        <td>USD</td>
        <td><input type="text" class="form-control form-control-sm" id="test77" onfocusout="onchange1()" value="1" disabled></td>
        <td><span id="test88">400</span></td>
        <td><span id="per22">6%</span></td>
        <td><span id="ans221">6,250</span></td>
        <td><span id="ans222">0</span></td>
        <td>0</td>
        <td><span id="ans444">0</span></td>
        <td><span id="ans666">40</span></td>
        <td></td>
      </tr>                            
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100312</td>
        <td></td>
        <td>A1</td>
        <td>IEB-010ARTY</td>
        <td>abc</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/20</td>
        <td>3</td>
        <td>25</td>
        <td>100</td>
        <td>JPY</td>
        <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
        <td>2,500</td>
        <td>86%</td>
        <td>43,103</td>
        <td>0</td>
        <td>0.0%</td>
        <td>0</td>
        <td>100</td>
        <td></td>
      </tr>
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100312</td>
        <td>15</td>
        <td>IEB011</td>
        <td>Wanda</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/20</td>
        <td>1</td>
        <td>10</td>
        <td>40</td>
        <td>JPY</td>
        <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
        <td>400</td>
        <td>14%</td>
        <td>6,897</td>
        <td>0</td>
        <td>0.0%</td>
        <td>0</td>
        <td>40</td>
        <td></td>
      </tr>

      <tr class="table-info" id="row2" >
        <td><input type="checkbox" class="checkbox-input"></td>
        <td>10004</td>
        <td>2021/04/10</td>
        <td>2021/04/20</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td>
        <td><input type="text" class="form-control form-control-sm" value="0" disabled></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <button type="button" class="btn btn-primary btn-sm">cancel</button>
        </td>
      </tr>
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100312</td>
        <td></td>
        <td>A1</td>
        <td>IEB-010ATYU</td>
        <td>abc</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/20</td>
        <td>3</td>
        <td>25</td>
        <td>100</td>
        <td>JPY</td>
        <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
        <td>2,500</td>
        <td>86%</td>
        <td>43,103</td>
        <td>0</td>
        <td>0.0%</td>
        <td>0</td>
        <td>100</td>
        <td></td>
      </tr>
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100312</td>
        <td>15</td>
        <td>IEB011</td>
        <td>abc</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/20</td>
        <td>1</td>
        <td>10</td>
        <td>40</td>
        <td>JPY</td>
        <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
        <td>400</td>
        <td>14%</td>
        <td>6,897</td>
        <td>0</td>
        <td>0.0%</td>
        <td>0</td>
        <td>40</td>
        <td></td>
      </tr>
      
      <tr class="table-info" id="row2" >
        <td><input type="checkbox" class="checkbox-input"></td>
        <td>10004</td>
        <td>2021/04/10</td>
        <td>2021/04/20</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td>
        <td><input type="text" class="form-control form-control-sm" value="0" disabled></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <button type="button" class="btn btn-primary btn-sm">cancel</button>
        </td>
      </tr>
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100312</td>
        <td></td>
        <td>A1</td>
        <td>IEB-010AJKA</td>
        <td>abc</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/20</td>
        <td>3</td>
        <td>25</td>
        <td>100</td>
        <td>JPY</td>
        <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
        <td>2,500</td>
        <td>86%</td>
        <td>43,103</td>
        <td>0</td>
        <td>0.0%</td>
        <td>0</td>
        <td>100</td>
        <td></td>
      </tr>
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100312</td>
        <td>15</td>
        <td>IEB011</td>
        <td>abc</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/20</td>
        <td>1</td>
        <td>10</td>
        <td>40</td>
        <td>JPY</td>
        <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
        <td>400</td>
        <td>14%</td>
        <td>6,897</td>
        <td>0</td>
        <td>0.0%</td>
        <td>0</td>
        <td>40</td>
        <td></td>
      </tr>

                                  <tr class="table-info" id="row2" >
        <td><input type="checkbox" class="checkbox-input"></td>
        <td>10004</td>
        <td>2021/04/10</td>
        <td>2021/04/20</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td>
        <td><input type="text" class="form-control form-control-sm" value="0" disabled></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <button type="button" class="btn btn-primary btn-sm">cancel</button>
        </td>
      </tr>
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100312</td>
        <td></td>
        <td>A1</td>
        <td>IEB-00010AKSLS</td>
        <td>abc</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/20</td>
        <td>3</td>
        <td>25</td>
        <td>100</td>
        <td>JPY</td>
        <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
        <td>2,500</td>
        <td>86%</td>
        <td>43,103</td>
        <td>0</td>
        <td>0.0%</td>
        <td>0</td>
        <td>100</td>
        <td></td>
      </tr>
      <tr class="ligth" style="background-color: white;">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>36100312</td>
        <td>15</td>
        <td>IEB011</td>
        <td>Wanda</td>
        <td>S</td>
        <td>BR</td>
        <td>brown</td>
        <td></td>
        <td>2021/04/20</td>
        <td>1</td>
        <td>10</td>
        <td>40</td>
        <td>JPY</td>
        <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
        <td>400</td>
        <td>14%</td>
        <td>6,897</td>
        <td>0</td>
        <td>0.0%</td>
        <td>0</td>
        <td>40</td>
        <td></td>
      </tr>
    </tbody>                                                    
</table>

<style>
  .table-responsive>.fixed-column 
    {
      position: absolute;
      display: inline-block;
      width: auto;
      padding: 0px 27px !important;
      /* border: hidden; */
      margin-left: -27px;
      white-space: nowrap;
      /* border-right: 1px solid #ddd; */
    }

    .table-responsive>.fixed-column th, td
    {
        padding: 15px 20px !important;
        /* border-bottom: 1px solid white !important; */
        text-align: center;
        white-space: nowrap;
        size: auto;
    }

    table.dataTable thead th
    {
      text-align: center;
      white-space: nowrap;
    }                    
    table.dataTable th, td
    {
        width: 100%;
        margin: 0px 8px;
        /* clear: both; */
        /* border-collapse: separate; */
        /* border-spacing: 0; */
        white-space: nowrap;
        size: auto;
        text-align: center;
        table-layout: fixed;
    }

   </style>

上面我用过的html代码表。

我还根据需要修复了前 4 列。下面是用于固定列的 js 代码

// fixed column
      var $table = $('.temp1');
      var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

      $fixedColumn.find('th:not(:nth-child(-n+4)),td:not(:nth-child(-n+4))').remove();            

      $fixedColumn.find('tr').each(function (i, elem) {
        $(this).height($table.find('tr:eq(' + i + ')').height());                       
      });
      $table.addClass('original_table');

现在在这段代码中我尝试了数据表的 js。

$('.original_table').DataTable( {
   fixedHeader: true
} );

也尝试了其他解决方案，但不适用于标题修复。你能告诉我们如何修复带有 dataTable 功能或没有 dataTable 功能的标题。

需要如下图所示的表格布局输出。

【问题讨论】：

您已经在使用fixed header 扩展。你能把它和fixed columns 扩展结合起来吗？我从来没有同时使用它们——只是分开使用。我将从一个基本表格开始 - 不需要额外的 JS 代码。
@andrewjames 我尝试了数据表的固定列功能，但它不起作用，如果我使用了该功能，设计会改变。
你能解决这个问题吗？我在过去 3-4 天被这个问题困住了，我不明白，甚至没有工作 css 和自定义 js
“没用，设计变了”是什么意思？
请检查我是否给出了输出屏幕，我需要使用修复标题来执行此输出。

标签： javascript html jquery datatable

【解决方案1】：

这行得通。
您必须再次使用相应的表头调整您的值。

$('.temp1').DataTable({
  fixedHeader: true
});

.table-responsive>.fixed-column 
    {
      position: absolute;
      display: inline-block;
      width: auto;
      padding: 0px 27px !important;
      /* border: hidden; */
      margin-left: -27px;
      white-space: nowrap;
      /* border-right: 1px solid #ddd; */
    }

    .table-responsive>.fixed-column th, td
    {
        padding: 15px 20px !important;
        /* border-bottom: 1px solid white !important; */
        text-align: center;
        white-space: nowrap;
        size: auto;
    }

    table.dataTable thead th
    {
      text-align: center;
      white-space: nowrap;
    }                    
    table.dataTable th, td
    {
        width: 100%;
        margin: 0px 8px;
        /* clear: both; */
        /* border-collapse: separate; */
        /* border-spacing: 0; */
        white-space: nowrap;
        size: auto;
        text-align: center;
        table-layout: fixed;
    }

<link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<div class="table-responsive">
   <table class="temp1 table table-striped mt-2 table-bordered" cellspacing="0" cellpadding="0" style="margin-bottom: 0px; margin-top: 0px;" role="grid" aria-describedby="user-list-page-info" id="user-list-table">
     <thead class='headertbl'>
       <tr class="ligth" style="margin-left: 2px;">
         <th>&nbsp;</th>
         <th>Id_No</th>
         <th>updated_date</th>
         <th>estimated_date</th>
         <th>product_id</th>
         <th>product_name</th>
         <th>box_no</th>
         <th>color_code</th>
         <th>color_name</th>
         <th>size_code</th>
         <th>size_name</th>
         <th>childe_color</th>
         <th>remark</th>
         <th>arrival_date</th>
         <th>units</th>
         <th>quantity</th>
         <th>unit_price</th>
         <th>currency</th>
         <th>excahnge</th>
         <th>current_currency(JPY)</th>
         <th>Amount</th>
         <th>Insurance_cost</th>
         <th>Shipping costs</th>
         <th>custom rate</th>
         <th>Tariffs</th>
         <th>Purchase price</th>
         <th>&nbsp;</th>
       </tr>
     </thead>
     <tbody>
       <!-- first row -->
       <tr class="table-info" id="row2">
         <td><input type="checkbox" class="checkbox-input"></td>
         <td>10001</td>
         <td>2021/04/10</td>
         <td>2021/04/20</td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td><input type="text" class="form-control form-control-sm" id="num1" value="1,00,000" onfocusout="change()"></td>
         <td><input type="text" class="form-control form-control-sm" id="num2" value="3,00,000" onfocusout="change()"></td>
         <td></td>
         <td><input type="text" class="form-control form-control-sm" id="num3" value="10,000" onfocusout="change()"></td>
         <td></td>
         <td>
           <button type="button" class="btn btn-primary btn-sm">update</button>
           <button type="button" class="btn btn-primary btn-sm">cancel</button>
           <button type="button" class="btn btn-primary btn-sm">confirm</button>
         </td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100310</td>
         <td></td>
         <td>A1</td>
         <td>IEB-010A(HB) + IEB-011B(CBX)</td>
         <td>Wanda</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/20</td>
         <td>3</td>
         <td><span id="test1">50</span></td>
         <td><span id="test2">120</span></td>
         <td>USD</td>
         <td><input type="text" class="form-control form-control-sm" id="test4" onfocusout="change()" value="105"></td>
         <td><span id="test3">6,30,000</span></td>
         <td><span id="per">94%</span></td>
         <td><span id="ans">93,750</span> </td>
         <td><span id="ans11">2,81,250</span></td>
         <td>3.80%</td>
         <td><span id="ans33">9612</span> </td>
         <td><span id="ans55">18,417</span></td>
         <td></td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100310</td>
         <td>15</td>
         <td>IEB011</td>
         <td>Wanda(すのこ)</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/20</td>
         <td>1</td>
         <td><span id="test5">10</span></td>
         <td><span id="test6">40</span></td>
         <td>USD</td>
         <td><input type="text" class="form-control form-control-sm" id="test7" onfocusout="change()" value="105"></td>
         <td><span id="test8">42,000</span></td>
         <td><span id="per2">6%</span></td>
         <td><span id="ans2">6,250</span></td>
         <td><span id="ans22">18,750</span></td>
         <td>2.30%</td>
         <td><span id="ans44">388</span></td>
         <td><span id="ans66">6,114</span></td>
         <td></td>
       </tr>
       <!-- second row -->
       <tr class="table-info" id="row2">
         <td><input type="checkbox" class="checkbox-input"></td>
         <td>10001</td>
         <td>2021/04/10</td>
         <td>2021/04/20</td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td><input type="text" class="form-control form-control-sm" id="num11" value="0" onfocusout="change2()"></td>
         <td><input type="text" class="form-control form-control-sm" id="num22" value="0" onfocusout="change2()"></td>
         <td></td>
         <td><input type="text" class="form-control form-control-sm" id="num33" value="0" onfocusout="change2()"></td>
         <td></td>
         <td>
           <button type="button" class="btn btn-primary btn-sm">update</button>
           <button type="button" class="btn btn-primary btn-sm">cancel</button>
           <button type="button" class="btn btn-primary btn-sm">confirm</button>
         </td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100310</td>
         <td></td>
         <td>A1</td>
         <td>IEB-010A(HB) + IEB-011B(CBX)</td>
         <td>Wanda</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/20</td>
         <td>3</td>
         <td><span id="test01">50</span></td>
         <td><span id="test02">120</span></td>
         <td>USD</td>
         <td><input type="text" class="form-control form-control-sm" id="test04" onfocusout="change2()" value="105"></td>
         <td><span id="test03">6,30,000</span></td>
         <td><span id="per01">100%</span></td>
         <td><span id="ans01">0</span> </td>
         <td><span id="ans011">0</span></td>
         <td>3.80%</td>
         <td><span id="ans033">0</span> </td>
         <td><span id="ans055">12,600</span></td>
         <td></td>
       </tr>
       <!-- third row -->
       <tr class="table-info" id="row2">
         <td><input type="checkbox" class="checkbox-input"></td>
         <td>10003</td>
         <td>2021/04/10</td>
         <td>2021/04/20</td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td><input type="text" class="form-control form-control-sm" id="no11" value="100000" onfocusout="onchange1()"></td>
         <td><input type="text" class="form-control form-control-sm" id="no22" value="0" disabled></td>
         <td></td>
         <td><input type="text" class="form-control form-control-sm" id="no33" value="0" style="visibility: hidden;"></td>
         <td></td>
         <td>
           <button type="button" class="btn btn-primary btn-sm">cancel</button>
           <button type="button" class="btn btn-primary btn-sm">confirm</button>
         </td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100311</td>
         <td></td>
         <td>A1</td>
         <td>IEB-010A(HB) + IEB-011B(CBX)</td>
         <td>Wanda</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/20</td>
         <td>3</td>
         <td><span id="test11">50</span></td>
         <td><span id="test22">120</span></td>
         <td>JPY</td>
         <td><input type="text" class="form-control form-control-sm" id="test44" onfocusout="onchange1()" value="1" disabled></td>
         <td><span id="test33">6,000</span></td>
         <td><span id="per11">94%</span></td>
         <td><span id="ans112">93,750</span> </td>
         <td><span id="ans111">0</span></td>
         <td>0</td>
         <td><span id="ans333">0</span> </td>
         <td><span id="ans555">120</span></td>
         <td></td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100311</td>
         <td>15</td>
         <td>IEB011</td>
         <td>Wanda(すのこ)</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/15</td>
         <td>1</td>
         <td><span id="test55">10</span></td>
         <td><span id="test66">40</span></td>
         <td>JPY</td>
         <td><input type="text" class="form-control form-control-sm" id="test77" onfocusout="onchange1()" value="1" disabled></td>
         <td><span id="test88">400</span></td>
         <td><span id="per22">6%</span></td>
         <td><span id="ans221">6,250</span></td>
         <td><span id="ans222">0</span></td>
         <td>0</td>
         <td><span id="ans444">0</span></td>
         <td><span id="ans666">40</span></td>
         <td></td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100312</td>
         <td></td>
         <td>A1</td>
         <td>IEB-010A(HB) + IEB-011B(CBX)</td>
         <td>Wanda</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/20</td>
         <td>3</td>
         <td>25</td>
         <td>100</td>
         <td>JPY</td>
         <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
         <td>2,500</td>
         <td>86%</td>
         <td>43,103</td>
         <td>0</td>
         <td>0.0%</td>
         <td>0</td>
         <td>100</td>
         <td></td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100312</td>
         <td>15</td>
         <td>IEB011</td>
         <td>Wanda(すのこ)</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/20</td>
         <td>1</td>
         <td>10</td>
         <td>40</td>
         <td>JPY</td>
         <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
         <td>400</td>
         <td>14%</td>
         <td>6,897</td>
         <td>0</td>
         <td>0.0%</td>
         <td>0</td>
         <td>40</td>
         <td></td>
       </tr>

       <tr class="table-info" id="row2">
         <td><input type="checkbox" class="checkbox-input"></td>
         <td>10004</td>
         <td>2021/04/10</td>
         <td>2021/04/20</td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td>
         <td><input type="text" class="form-control form-control-sm" value="0" disabled></td>
         <td></td>
         <td></td>
         <td></td>
         <td>
           <button type="button" class="btn btn-primary btn-sm">cancel</button>
         </td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100312</td>
         <td></td>
         <td>A1</td>
         <td>IEB-010A(HB) + IEB-011B(CBX)</td>
         <td>Wanda</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/20</td>
         <td>3</td>
         <td>25</td>
         <td>100</td>
         <td>JPY</td>
         <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
         <td>2,500</td>
         <td>86%</td>
         <td>43,103</td>
         <td>0</td>
         <td>0.0%</td>
         <td>0</td>
         <td>100</td>
         <td></td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100312</td>
         <td>15</td>
         <td>IEB011</td>
         <td>Wanda(すのこ)</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/20</td>
         <td>1</td>
         <td>10</td>
         <td>40</td>
         <td>JPY</td>
         <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
         <td>400</td>
         <td>14%</td>
         <td>6,897</td>
         <td>0</td>
         <td>0.0%</td>
         <td>0</td>
         <td>40</td>
         <td></td>
       </tr>

       <tr class="table-info" id="row2">
         <td><input type="checkbox" class="checkbox-input"></td>
         <td>10004</td>
         <td>2021/04/10</td>
         <td>2021/04/20</td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td>
         <td><input type="text" class="form-control form-control-sm" value="0" disabled></td>
         <td></td>
         <td></td>
         <td></td>
         <td>
           <button type="button" class="btn btn-primary btn-sm">cancel</button>
         </td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100312</td>
         <td></td>
         <td>A1</td>
         <td>IEB-010A(HB) + IEB-011B(CBX)</td>
         <td>Wanda</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/20</td>
         <td>3</td>
         <td>25</td>
         <td>100</td>
         <td>JPY</td>
         <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
         <td>2,500</td>
         <td>86%</td>
         <td>43,103</td>
         <td>0</td>
         <td>0.0%</td>
         <td>0</td>
         <td>100</td>
         <td></td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100312</td>
         <td>15</td>
         <td>IEB011</td>
         <td>Wanda(すのこ)</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/20</td>
         <td>1</td>
         <td>10</td>
         <td>40</td>
         <td>JPY</td>
         <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
         <td>400</td>
         <td>14%</td>
         <td>6,897</td>
         <td>0</td>
         <td>0.0%</td>
         <td>0</td>
         <td>40</td>
         <td></td>
       </tr>

       <tr class="table-info" id="row2">
         <td><input type="checkbox" class="checkbox-input"></td>
         <td>10004</td>
         <td>2021/04/10</td>
         <td>2021/04/20</td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td>
         <td><input type="text" class="form-control form-control-sm" value="0" disabled></td>
         <td></td>
         <td></td>
         <td></td>
         <td>
           <button type="button" class="btn btn-primary btn-sm">cancel</button>
         </td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100312</td>
         <td></td>
         <td>A1</td>
         <td>IEB-010A(HB) + IEB-011B(CBX)</td>
         <td>Wanda</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/20</td>
         <td>3</td>
         <td>25</td>
         <td>100</td>
         <td>JPY</td>
         <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
         <td>2,500</td>
         <td>86%</td>
         <td>43,103</td>
         <td>0</td>
         <td>0.0%</td>
         <td>0</td>
         <td>100</td>
         <td></td>
       </tr>
       <tr class="ligth" style="background-color: white;">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>36100312</td>
         <td>15</td>
         <td>IEB011</td>
         <td>Wanda(すのこ)</td>
         <td>S</td>
         <td>BR</td>
         <td>ブラウン</td>
         <td></td>
         <td>2021/04/20</td>
         <td>1</td>
         <td>10</td>
         <td>40</td>
         <td>JPY</td>
         <td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
         <td>400</td>
         <td>14%</td>
         <td>6,897</td>
         <td>0</td>
         <td>0.0%</td>
         <td>0</td>
         <td>40</td>
         <td></td>
       </tr>
     </tbody>
   </table>
</div>

【讨论】：

但是，我还需要修复第一 4 列，我也为此提供了 JS，并且需要处理此修复标题，并且每一行都有子行，在您的输出中显示为不同行，
您到底期望什么？您只喜欢前四个标题的固定标题？
请再次检查我是否提供了 css，我需要在向下滚动时修复标题（如果可能，整页），还需要在滚动右侧修复第 4 列。
所以用css更新了我上面的例子。现在它的格式很好。
尚未正确格式化，如果您删除用于固定标题的JS，它将显示格式正确，请检查一次。我需要用格式化的方式修复这样的标题，js 无法正常工作。

【解决方案2】：

从一个简单的 DataTable 开始，它有两个功能都可以正常工作：固定列和固定标题：

$(document).ready(function() {

  var table = $('#example').DataTable( {
    "fixedHeader": true,
    "scrollX": true,
    "fixedColumns": {
      leftColumns: 1
    },
    "paging": false
  } );

} );

<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
  
  <!-- fixed headings -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.9/css/fixedHeader.dataTables.min.css"/>
  <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.9/js/dataTables.fixedHeader.min.js"></script>

  <!-- fixed columns -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.3.2/css/fixedColumns.dataTables.min.css"/>
  <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script>

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:150%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office in Country</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</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>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
            </tr>
            <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
            </tr>
            <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
            </tr>
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sydney</td>
                <td>23</td>
                <td>2010/09/20</td>
                <td>$85,600</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010/12/22</td>
                <td>$92,575</td>
            </tr>
        </tbody>
    </table>

</div>

</body>
</html>

然后逐一添加您的自定义设置。如果定制打破了桌子，那么您可以重新考虑。或者针对该特定问题提出新的特定问题。

您也可以访问downloads页面，自定义您要使用的资源。

【讨论】：

如果我在tr 中设置了一些空白，比如<td></td>，它会起作用吗？可能是它不起作用。
对不起 - 我不明白你的评论。
表示如果你查看我的table code，那么td是空的，这样我们可以实现吗？在数据表中或没有类dataTable
你能把<td></td>放在一张桌子上吗？是的你可以。我仍然认为我不明白你在问什么——或者你为什么问它。
当您提供上述解决方案与您的表格一起使用时，您可以尝试使用我的表格代码吗？它是否有效，因为我尝试过它无效。