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网站上的Bootstrap2修改，只是为了使用Bootstrap3的CSS和表单结构而进行了修改。

Answer 2

更好的解决方案是为数据表提供唯一的类名并对其进行自定义，

请遵循以下内容：

1. 不使用3000px的宽度或其他东西，在percentage.so中使用测量可以实现响应性，避免内联CSS样式。