CODEWITHSUNDEEP
javascriptcssgoogle-visualization
user3892657
user3892657

Reputation:

Don't let me change the css Google Chart

I have a table made with Google Chart that I've added styles to. The problem is that my padding style has less priority than the style from google's stylesheet.

What is .google-visualization-table-table *{}? Where does it come from?

A picture is worth a thousand words. > https://i.sstatic.net/bfhkY.jpg

Here's the code as well:

.google-visualization-table-table ) {
    margin: 0;
    vertical-align: middle;
    padding: 2px;
}

// and my style code:
.tableHeaderCell {
    border: 0;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
    padding: 0.75em 1.5em; // this is the line of code that doesnt overwrite the pre-existing padding of 2px;
}

html: <td class="tableHeaderCell google-visualization-table-sorthdr"></td>

Upvotes: 0

Views: 62

Answers (2)

indubitablee
indubitablee

Reputation: 8206

you can always add !important to override the .google-visualization-table-table code by doing:

.tableHeaderCell {
   //other css styles here;
   padding: 0.75em 1.5em !important;
}

Upvotes: 0

tomtomtom
tomtomtom

Reputation: 899

It's because of the priority of CSS rule, I think you should try :

.google-vizualisation-table-table .tableHeaderCell{
  padding: 0.75em 1.5em;
}

Upvotes: 1

Related Questions