每次我使用谷歌图表的表格时，谷歌加载器都会加载一个http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css
它总是几乎会杀死我的引导 css，而且我在凌晨 2 点并不很烦人。:)
注意：我不能修改 table.css 文件。
您知道任何可以阻止加载 CSS 文件的方法吗？
谢谢您的帮助。
PS：是的，我已经尝试过使用 JS，但是表格在切换页面时会重新编译，所以我应该在table每次分页时替换 's 类名。
如Google Chart Table API Docs中所见，您可以通过设置cssClassNames选项覆盖 CSS 类：
使用此属性将自定义 CSS 分配给表格的特定元素
通过上面的链接查看文档以查看cssClassNames.
非常简单，基于Google Playground Table 示例，如果您覆盖所有属性，该表格将（几乎）没有 Google CSS。
您可以通过在 Playground 示例中复制以下代码来尝试：
// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
cssClassNames: {
headerRow: 'someclass',
tableRow: 'someclass',
oddTableRow: 'someclass',
selectedTableRow: 'someclass',
hoverTableRow: 'someclass',
headerCell: 'someclass',
tableCell: 'someclass',
rowNumberCell: 'someclass'
}
});
这应该让 Twitter Bootstrap CSS 单独存在。
加载的 CSS 仍然会改变一些东西，但如果你只是删除 class 似乎就会消失google-visualization-table-table。你应该在每次.draw()通话后这样做。
var className = 'google-visualization-table-table';
$('.'+className).removeClass(className);
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
page: 'enable',
pageSize: 2,
cssClassNames: {
/* ... */
}
});
google.visualization.events.addListener(visualization , 'page',
function(event) {
var className = 'google-visualization-table-table';
$('.'+className).removeClass(className);
});
不要忘记调用.removeClass()on 初始化（你应该做一个函数，就像那里： http: //pastebin.com/zgJ7uftZ）
给你body上课。然后利用该类确定您的 CSS 范围。
<body class="my">..</body>
.my .google-visualization-table-table { /* blah */ }
My idea is still like some others here, to override the google through a more specific selector. I think with bootstrap, perhaps the easiest way to do that is something like this:
id on your html tag.HTML
<html id="myHTML">All your html goes here</html>
id.LESS
#myHTML {
font-size: 100%;
@import: "yourpath/bootstrap.less";
@import: "yourpath/anyOtherBootstrapFilesYouMightLoad.less";
etc...
}
Note, the font-size: 100% is because the bootstrap.less has html { font-size: 100% } which you want to keep that functionality, but you will lose it if you don't replicate what is in the bootstrap call for html. See the CSS output below for further explanation.
CSS (Brief sample output)
#myHTML {
font-size: 100%;
}
#myHTML article,
#myHTML aside,
#myHTML details,
#myHTML figcaption,
#myHTML figure,
#myHTML footer,
#myHTML header,
#myHTML hgroup,
#myHTML nav,
#myHTML section {
display: block;
}
#myHTML html {
/* this is from the base html call in bootstrap, but will never
select anything as it is basically like writing "html html"
for a selector, which is why we added the font-size to your
LESS code above
*/
font-size: 100%;
}
#myHTML .btn {
etc...
}
By doing this, you can see how all straight classes, like .btn, end up having an id appended to them that is on your <html> tag. This gives the selector a higher specificity than google's .google-visualization-table-table *, as the id is higher than the * selector in precedence.
如果您只是获取 google api 加载的 js 的副本并将其放在您的服务器中，如下例中的 table.js 中所示，并评论 google api 调用怎么办。
// google.load('visualization', '1', {packages:['table']});
在其中找到字符串'/table/table.css'并将其替换为'/table/../core/tooltip.css'
这样，永远不会加载 table.css。
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript' src='table.js'></script>
</head>
<body>
<div id='table_div'></div>
<script type='text/javascript'>
// google.load('visualization', '1', {packages:['table']});
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
</script>
</body>
</html>
我不确定这是否违反了任何规定，这是一个非常老套的解决方案。显然，这是有后果的。
我在那里只看到两种可能性。要么将所有 CSS 选择器更改为具有更高特异性的东西，要么使用 Javascript 删除您不想加载的样式表。
如果您使用 CSS 预处理器，更改 CSS 选择器是没有问题的。您甚至可以只使用它一次来更改所有选择器。
使用 Javascript，您需要一个可以挂起删除样式表的事件侦听器的点。这一点必须在添加样式表之后。
如果您没有这样的观点，您将不得不覆盖 document.createElement （这通常是一种不好的做法）。
这对我有用。由于 IE<9s 缺少数组的 addEventListener 和 indexOf ，它在那里不起作用。但是在你修复它之后它也应该在那里工作：
(function () {
var createElement = document.createElement,
stylesheetBlacklist = [
'http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css'
];
document.createElement = function (tagname) {
var e = createElement.apply(this, arguments);
if (tagname === 'link') {
if (e.__defineSetter__) {
var setAttr = e.setAttribute;
e.__defineSetter__('src', function (val) {
e.setAttribute('src', val);
});
e.setAttribute = function (attrName, attrVal) {
if (attrName !== 'src' || stylesheetBlacklist.indexOf(attrVal) === -1) {
setAttr.call(e, attrName, attrVal);
}
}
} else {
e.addEventListener('load', function () {
if (stylesheetBlacklist.indexOf(this.src) > -1) {
this.parentNode.removeChild(this);
}
});
}
}
return e;
}
}());
当然这不会阻止任何样式表在样式元素中被@imported。所以它真的更像是一个肮脏的黑客而不是一个解决方案......</p>
遗憾的是，Google API 提供了“nocss”选项，但在可视化模块中不支持它。
编辑：如果浏览器支持defineSetter它甚至不再加载样式表。
我相信这应该可以解决您的问题：链接
取自链接：
为您的 CSS 类名添加前缀
var cssClassNames = {
'tableCell': 'myTable myBorder'};
然后像这样改变你的css减速：
.myTable.myBorder {
border: 1px solid #6699FF;
font-size:11px;
color:#226180;
padding:135px;
margin:135px;
}
很容易，因为你已经安装了 jQuery：
jQuery(document).ready(function ($) {
$('*[class*=google-visualization]').attr('class', function() {
return $(this).attr('class').replace('google', 'yahoo')
})
});