如何修复数据表或常规表向下滚动时的标题？
问题描述 投票：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 在视口中可拖动，它甚至可以工作。
最新问题
- Selenium 无法定位任何元素
- 受控Z门没有效果
- 颤振中图像下方的步进器自定义视图
- 创建一个循环将数据从一个工作簿复制到另一个工作簿，然后将结果复制回原始工作簿
- dracut-install：找不到模块“hid-polostar”
- c++ 和 std::float64_t 如何使用它
- gdb - 哪个变量位于给定的堆栈地址
- Android Room：如何从关系表中提取数据？
- 如何在Delphi中使用记录实现Builder模式而不创建副本？
- 使用 cv2 和 Streamlit lib 时发生 Streamlit 部署错误
- GDB 可以调试通过没有可用源代码的程序启动的劣质进程吗？
- Configuration.set可以在Mapper中使用吗？
- 每次我尝试运行我的应用程序时，都会收到“运行‘main.dart’时出错：入口点不在 Flutter pub root 内”
- 在UILabel中显示分数
- 通过命令行或 powershell 5.1 调用时，Powershell 7.2 操作不起作用
- 多处理嵌套 DictProxy 对象不允许使用 .items()
- 如何让hadoop put创建不存在的目录
- Hono Zod 类型“json”的参数不可分配给类型“never”的参数
- 如何在 Compose 中查看应用的位图旋转
- nginx 重定向到索引页面
© www.soinside.com 2019 - 2024. All rights reserved.