Datatables ヘッダーが整列していない場合の対処方法

この章では、jQuery Datatables ヘッダーの不整合に対する解決策を説明します。データテーブルを使用するときに、この状況がよく発生します。つまり、ブラウザまたは HTML 内の要素のサイズや解像度が変更された後、タイトルの位置がずれるということです。この状況は、serverSide が Datatables フレームワークで使用されているために発生します。 : true, // サーバーはデータ属性をクエリします。これにより、style="width:**px;" 属性が Table タグに追加され、サイズが変更されるとタイトルの位置がずれる原因になります。

<table id="example" class="table table-border table-bordered table-bg table-hover table-sort"> 
 <thead> 
  <tr class="text-c"> 
   <th width="25"> 
    <input type="checkbox" name="checkAll" class="checkall" onclick="checkedClean();"> 
   </th> 
   <th width="100">名称</th> 
   <th width="100">说明</th> 
   <th width="100">类型</th> 
   <th width="60">是否默认</th> 
   <th width="20">状态</th> 
   <th width="100"></th> 
 </thead> 
 <tbody> 
 </tbody> 
</table>

解決策

#example{ 
 width: 100% !important; 
}

水平スクロールバーが表示された場合は、テーブルの幅を設定するだけです

#example{ 
 width: ***px !important; 
}

これは完璧な解決策です。

上記の内容は、jQuery Datatables ヘッダーの不整合に対する解決策です。皆様のお役に立てれば幸いです。

関連する推奨事項:

PHPExcel でヘッダーをフリーズおよびロックする方法の紹介

HTML5 の表でスラッシュ ヘッダー効果を実現する 5 つの方法

ヘッダーの並べ替えに関する 5 つのおすすめ記事

以上がDatatables ヘッダーが整列していない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。