如何修复数据表或常规表向下滚动时的标题？
问题描述 投票：0回答：3
我在代码中使用了数据表，但我正在尝试修复标头。 我也尝试过使用数据表的
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> </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> </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
} );
还尝试了其他解决方案，但不适用于标头修复。 你能告诉我们如何修复带有数据表功能或不带有数据表功能的标题吗？
需要表格布局输出，如下面的屏幕图像。
3个回答
0
投票
投票
这有效。
您必须再次使用相应的表头调整您的值。
$('.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> </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> </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>0
投票
投票
从一个简单的 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>然后逐一添加您的自定义设置。如果自定义破坏了表格，那么您可以重新考虑。或者针对该特定问题提出一个新的特定问题。
您还可以访问下载页面，自定义您要使用的资源。
0
投票
投票
据我所知，fixedHeader和fixedColumns不能一起工作，但至少对于fixedHeader来说，有一个更简单的解决方案应该始终有效：
对于数据表本身，设置scrollY:false（不过我建议设置scrollcollapse:true）并且不要使用fixedHeader插件。
如果您的数据表没有父级 div，请创建一个并设置overflow-y:scroll。
然后为父 div id（或类，如果有很多）设置以下 css：
.parentdivclass th {
position:sticky;
top:0px;
background-color:white; /* or whatever color it should be */
}
位置粘性将始终将所选元素相对于其直接的可滚动父元素“粘住”。您必须定义顶部、左侧、右侧、底部之一来告诉它应该粘在父项的哪一侧（因此这也适用于水平滚动）。
需要背景颜色，否则你会看到正文内容在标题后面滚动。
因此，这应该始终适用于任何数据表标头，包括特殊的标头，例如搜索过滤器等，如果父 div 在视口中可拖动，它甚至可以工作。
最新问题
- ModelAttribute 在 Spring MVC 中向控制器返回 null 值
- 我正在尝试从 tinder 中抓取一些信息，但我不断收到 StaleElementReferenceException
- 从 Eclipse 控制台窗口中打开文件
- typedef 声明完成后是否需要前向声明
- SQL Server：何时使用排序规则和 nvarchar
- Xcode 自动更正工具？
- 使用数据库连接池为每个用户设置 search_path
- gunzip 文件到 mysql - 通过 ssh 在后台运行？
- Powershell InitializeDefaultDrives 错误始终阻止 Team Build 执行成功的构建
- pandas.Series 返回更新系列的方法
- Jaybird 3 和 Firebird 交易信息
- 这种情况应该建立哪种类型的索引来加快Hudi表的查询速度？
- 如何获取Python MYSQL连接用户名和密码？
- 在异步任务中执行的等待任务会使其重新实例化？
- 在异步任务中执行的 Blazor 可等待任务会使其重新实例化？
- 如何修复 JavaScript 函数中的“记住包含括号”错误？
- vba selenium webautomate 但图表未定义
- 如何解决错误：无法复制...重试次数超过 10。失败。 - VS 2017
- 在 malloc() 之后使用 memset() 会导致断言
- 打字时弹出不需要的搜索框
© www.soinside.com 2019 - 2024. All rights reserved.