Question

使用Datatable动态生成表结构

<table id="resource_report" width="70%" class="table dataTable no-footer" role="grid">
        <thead>
            <tr role="row"><th align="left" class="sorting_asc" tabindex="0" aria-controls="resource_report" rowspan="1" colspan="1" style="width: 135px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">Name</th><th class="sorting" tabindex="0" aria-controls="resource_report" rowspan="1" colspan="1" style="width: 95px;" aria-label="
                Week 1&amp;nbsp;(1-4)
                : activate to sort column ascending">
                Week 1&nbsp;(1-4)
                </th><th class="sorting" tabindex="0" aria-controls="resource_report" rowspan="1" colspan="1" style="width: 102px;" aria-label="
                Week 2&amp;nbsp;(5-11)
                : activate to sort column ascending">
                Week 2&nbsp;(5-11)
                </th><th class="sorting" tabindex="0" aria-controls="resource_report" rowspan="1" colspan="1" style="width: 111px;" aria-label="
                Week 3&amp;nbsp;(12-18)
                : activate to sort column ascending">
                Week 3&nbsp;(12-18)
                </th><th class="sorting" tabindex="0" aria-controls="resource_report" rowspan="1" colspan="1" style="width: 111px;" aria-label="
                Week 4&amp;nbsp;(19-25)
                : activate to sort column ascending">
                Week 4&nbsp;(19-25)
                </th><th class="sorting" tabindex="0" aria-controls="resource_report" rowspan="1" colspan="1" style="width: 111px;" aria-label="
                Week 5&amp;nbsp;(26-31)
                : activate to sort column ascending">
                Week 5&nbsp;(26-31)
                </th></tr>
        </thead>
</table>

从bootstrap-default.css

应用的CSS类

.table thead th {
    background-color: #16a085;
    color: #fff !important;
}

尝试使用以下功能删除

$(resource_report).removeAttr(" color:'', background-color:'' ");

表格标题如下所示

按下F12或检查元素

之后

并且像这样

如何删除类table thead th的属性如果不更改，则不会应用background-color和color CSS文件中的任何内容？
如何使表格标题看起来正确，采用适当的宽度而不是看起来压缩？

Answer 1

清空属性如下：

$(resource_report).css({"color":"", "background-color":"transparent !important"});

对于您的第二个问题，请尝试向您的表格提供width:auto或100%宽度，或者您可以触发window.resize，因为我看到他们在控制台打开时更新{{1}窗口..

Answer 2

你可以尝试这样的$（resource_report）.removeAttr（＆＃34; color，background-color＆＃34;）;

Answer 3

对于<th>宽度，它是由默认文本换行引起的。

预防此事

#resource_report th {
    white-space: nowrap;
}

我无法在任何地方找到类似的 bootstrap-default.css ，只是将您的表background-color覆盖到您想要的任何内容

#resource_report th {
    background-color: yellow;
}

yellow仅用于演示，正如另一个提到的那样 - 您也可以使用transparent。以上内容不会对任何其他＆＃34;增强的＆＃34;元素，只是你的#resource_report表（我相信这是你真正关心的问题） - 使用jQuery来改变CSS属性有点过头了，只需一行CSS即可实现。的 http://jsfiddle.net/0hgen4o6/

如果由于某些原因确实想要使用jQuery，那么至少使用正确的选择器：

$('#resource_report thead th').css('background-color', 'red');

<强> http://jsfiddle.net/0hgen4o6/1/

Answer 4

在我的情况下，这是由autoWidth默认为true引起的。

所以我要做的就是将其显式设置为false：

$('#example').dataTable({
  autoWidth: false
});

数据表 - 删除表类属性设置标题宽度

4 个答案: