Блог

Главная - Вопросы по программированию - проблема с исправлением заголовка при горизонтальной прокрутке в Datatable

проблема с исправлением заголовка при горизонтальной прокрутке в Datatable

#css #twitter-bootstrap #datatable

Вопрос:

Мне нужно исправить заголовок с возможностью ввода данных, чтобы я выполнил приведенный ниже код

 <div class="table-responsive" >
    <table class="table table-striped table-bordered table-hover dataTables-example" id="Salesorder">
        <thead>
            <tr>
                <th>Item</th>
                <th>Description</th>
                <th>Color</th>
                <th>Quantity Ordered</th>
                <th>Unit Price</th>
                <th>EQP</th>
                <th>Item Value</th>
                <th>Ship Site</th>
                <th>Order #</th>
                <th>O_</th>
                <th>D</th>
                <th>Acct</th>
                <th>Suff</th>
                <th>Customer Name</th>
                <th>Received Date</th>
                <th>Ship Code</th>
                <th>Ship Date</th>
                <th>Actual Ship Date</th>
                <th>Sales Representatives</th>
                <th>Order Commission</th>
                <th>Item Commission</th>
                <th>Customer P.O. Number</th>
                <th>Site Prod.</th>
                <th>Item Catalog</th>
                <th>#of impt</th>
                
            </tr>
        </thead>
        <tbody>
             
              
       </tbody>
    </table>
</div> 
 var table = $('.dataTables-example').DataTable({
  "aaSorting": [],
  pageLength: 50,
  responsive: true,
  fixedHeader: true,
  dom: '<"html5buttons"B>lTftigp'
});

Я должен исправить заголовок Datatable с fixedHeader: true помощью него, он отлично работает для вертикальной прокрутки, но когда я сверяюсь с горизонтальной, он выглядит так, как введите описание изображения здесьбудто я прокручиваю его слева направо, он все еще выглядит исправленным, так что столбцы не совпадают. кто-нибудь может мне в этом помочь?

Комментарии:

1. не могли бы вы также поделиться своими html-кодами?

2. @MohsenNewtoa пожалуйста, проверьте

3. вы пользуетесь <div class="container"><div class="row"><div class="col-12 table-responsive"> ? потому что для меня это очень хорошо

Метки: