Как исправить заголовок при прокрутке вниз DataTable или обычной таблицы? ⇐ Jquery

[Anonymous]

Я использовал таблицу данных в своем коде, но пытаюсь исправить заголовок.
Я также пытался использовать функцию fixHeader таблицы данных, но не сработало должным образом.

Код: Выделить всё

 
Id_No
updated_date
estimated_date
product_id
product_name
box_no
color_code
color_name
size_code
size_name
childe_color
remark
arrival_date
units
quantity
unit_price
currency
excahnge
current_currency(JPY)
Amount
Insurance_cost
Shipping costs
custom rate
Tariffs
Purchase price
 






10001
2021/04/10
2021/04/20























update
cancel
confirm







36100310

A1
IEB-010A
abc
S
BR
brown

2021/04/20
3
50
120
USD

6,30,000
94%
93,750 
2,81,250
3.80%
9612 
18,417








36100310
15
IEB011
abc
S
BR
brown

2021/04/20
1
10
40
USD

42,000
6%
6,250
18,750
2.30%
388
6,114





10001
2021/04/10
2021/04/20























update
cancel
confirm







36100310

A1
IEB-010A(HB)
abc
S
BR
brown

2021/04/20
3
50
120
USD

6,30,000
100%
0 
0
3.80%
0 
12,600





10003
2021/04/10
2021/04/20























cancel
confirm







36100311

A1
IEB-010A(HB)
abc
S
BR
brown

2021/04/20
3
50
120
JPY

6,000
94%
93,750 
0
0
0 
120








36100311
15
IEB00011
abc
S
BR
brown

2021/04/15
1
10
40
USD

400
6%
6,250
0
0
0
40







36100312

A1
IEB-010ARTY
abc
S
BR
brown

2021/04/20
3
25
100
JPY

2,500
86%
43,103
0
0.0%
0
100








36100312
15
IEB011
Wanda
S
BR
brown

2021/04/20
1
10
40
JPY

400
14%
6,897
0
0.0%
0
40





10004
2021/04/10
2021/04/20























cancel







36100312

A1
IEB-010ATYU
abc
S
BR
brown

2021/04/20
3
25
100
JPY

2,500
86%
43,103
0
0.0%
0
100








36100312
15
IEB011
abc
S
BR
brown

2021/04/20
1
10
40
JPY

400
14%
6,897
0
0.0%
0
40





10004
2021/04/10
2021/04/20























cancel







36100312

A1
IEB-010AJKA
abc
S
BR
brown

2021/04/20
3
25
100
JPY

2,500
86%
43,103
0
0.0%
0
100








36100312
15
IEB011
abc
S
BR
brown

2021/04/20
1
10
40
JPY

400
14%
6,897
0
0.0%
0
40





10004
2021/04/10
2021/04/20























cancel







36100312

A1
IEB-00010AKSLS
abc
S
BR
brown

2021/04/20
3
25
100
JPY

2,500
86%
43,103
0
0.0%
0
100








36100312
15
IEB011
Wanda
S
BR
brown

2021/04/20
1
10
40
JPY

400
14%
6,897
0
0.0%
0
40

Код: Выделить всё

.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;
}

выше таблицы 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 datatable.

Код: Выделить всё

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

также пробовались и другие решения для исправления заголовка, но они не сработали.
Можете ли вы рассказать нам, как я могу исправить заголовок с помощью функции dataTable или без функции dataTable.
нужен вывод макета таблицы, как на изображении ниже.



Подробнее здесь: https://stackoverflow.com/questions/678 ... ular-table