【问题标题】：Bootstrap intervenes with datatable cssBootstrap 使用数据表 css 进行干预
【发布时间】：2013-09-06 03:31:07
【问题描述】：

仅使用数据表

<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;">

使用引导程序后

<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。我还需要引导程序，因为还有其他依赖于它的 css，但引导程序也更改了数据表的 CSS。临时解决办法是

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

是否有任何解决方案使引导程序不会触及我的数据表 CSS？谢谢！！！

【问题讨论】：

你读过这个吗：datatables.net/blog/Twitter_Bootstrap_2
是的，我也查看了datatables.net/blog/Twitter_Bootstrap_2，但我不太确定如何将我的问题与 Booststrap 2 中所做的更改联系起来### 我使用的是 Bootstrap v2.3.2
你在哪里追加你的表知道你需要像这样改变 style="position:relative; overflow:scroll;"并注释scrollY, var table = $('#datatable').DataTable( { "dom": 't', "bSort": false, "paging ": false, //"scrollY":"450px" } );

标签： javascript jquery css twitter-bootstrap jquery-datatables

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

Better Solution 为数据表赋予了唯一的类名并对其进行自定义，

按照这个：

不要使用 3000px 宽度什么的，使用百分比来衡量。这样可以实现响应行为。
最大程度避免内联 CSS 样式。

【讨论】：