javascript - Bootstrap 介入 datatable css

Question

仅使用数据表

<div class="dataTables_scroll">
<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
<div class="dataTables_scrollHeadInner" style="width: 7548px; padding-right: 17px;">
<table class="display dataTable" cellspacing="0" cellpadding="0" border="0" style="margin-left: 0px; width: 7548px;">

---

使用bootstrap之后

<div class="dataTables_scroll">
<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px none; width: 7565px;">
<div class="dataTables_scrollHeadInner" style="width: 4401px; padding-right: 17px;">
<table class="display dataTable" cellspacing="0" cellpadding="0" border="0" style="margin-left: 0px; width: 4401px;">

所以我不得不恢复以前的 css。我还需要 bootstrap，因为还有其他依赖于它的 css，但 bootstrap 还更改了数据表的 CSS。临时解决方案是

$('.dataTables_scrollHead').css('width','100%');
$('.dataTables_scrollHeadInner').css('widht','7548');
$('.dataTable, .display').css('width','7548');

是否有任何解决方案可以使 Bootstrap 不会触及我的数据表 CSS？谢谢!!!

Answer 1

如果您使用的是 Bootstrap 3，我在博客上写了一些修改可能会有所帮助:

http://devblog.rayonnant.net/2013/09/bootstrap-3-datatables-paging.html

我的示例基于 datatables.net 网站上的 Bootstrap 2 修改，只是修改为使用 Bootstrap 3 的 CSS 和表单结构。