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

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>

从-default.css应用的CSS类

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

试着移除下面的使用但不起作用

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

表标题如下所示

​

在您按下F12或inspect元素之后，就像这样

​

​

1. 如何删除类table thead th的属性，以便在不更改CSS文件的情况下不应用background-color和color？
2. 如何使表头看起来正确，适当的宽度，而不看上去压缩？

Answer 1

至于<th>宽度，它是由默认的文本包装引起的。防止这种情况发生

#resource_report th {
    white-space: nowrap;
}

我在任何地方都找不到类似的引导-default.css，但只需将表background-color覆盖到任何您想要的

#resource_report th {
    background-color: yellow;
}

正如另一个人提到的，yellow只是为了演示--您也可以使用transparent。上面的内容不会对任何其他“引导”元素造成影响，只会影响您的#resource_report表(我相信这才是您真正关心的问题)--使用jQuery来更改CSS属性是有点过了，而这是可以通过一行CSS实现的。http://jsfiddle.net/0hgen4o6/

如果您出于某种原因真的想使用jQuery，那么至少要使用正确的选择器：

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

http://jsfiddle.net/0hgen4o6/1/

Answer 2

将属性清空如下：

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

对于第二个问题，尝试向您的表提供width:auto或100%宽度，或者您也可以触发window.resize，因为我看到它们正在控制台上更新，打开resizes窗口。

Answer 3

您可以尝试这样的$(Resource_report).removeAttr(“颜色，背景色”)；