Rumah > hujung hadapan web > tutorial js > Datatables表头不对齐怎么办

Datatables表头不对齐怎么办

小云云
Lepaskan: 2017-11-29 09:32:15
asal
2629 orang telah melayarinya

本章我们将教大家一种jQuery Datatables表头不对齐的解决办法。我们用Datatables经常会遇到这种情况,就是浏览器或者HTML里元素改变大小或分辨率后,标题就会出现不对齐现象。这种情况是因为Datatables框架中使用到serverSide : true,// 服务器查询数据属性,它会使Table标签中多一个style="width:**px;"属性,这就导致了变化大小时标题对不齐现象。

<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>
Salin selepas log masuk

2017112714560717_副本.png

解决方法

#example{ 
 width: 100% !important; 
}
Salin selepas log masuk

如果遇到设有横向滚动条时,就固定设置Table宽度

#example{ 
 width: ***px !important; 
}
Salin selepas log masuk

2017112714560718_副本.png

这样就完美解决啦。

以上内容就是jQuery Datatables表头不对齐的解决办法,希望能帮助到大家。

相关推荐:

PHPExcel实现冻结锁定表头的方法介绍

html5中实现table表格中的斜线表头效果的5种做法

关于表头排序的5篇文章推荐

Atas ialah kandungan terperinci Datatables表头不对齐怎么办. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan