CODEWITHSUNDEEP
htmlcssgoogle-visualization
Cornelis
Cornelis

Reputation: 1839

Add padding or margin to a cell in Google chart table

I am using a Google chart in table mode and in the table I want the content (the text) having a little distance from the border. I try to do that with css but padding, margin and their variants with -left doesn't work so far. The css that is linked to the tableCell property (which is part of the cssClassNames property of the table of google chart) is working, cause I can set the border and back grounds. But when I try to set the padding or margin etc. nothing changes. So what do I need to do to create a distance between the border and the content in the table?

This is the Google chart table I am using: https://developers.google.com/chart/interactive/docs/gallery/table

Upvotes: 7

Views: 15110

Answers (3)

Topper Harley
Topper Harley

Reputation: 12374

I stumbled upon the same problem and couldn't find a quick answer (nor a clean one either).

The solution I used to fix (hack?) this is to have my CSS classes more specific than the one used by the API.

Before:

.my-row-class td {
    padding: 15px;
}

After

.my-row-class td, .google-visualization-table-table .my-row-class td {
    padding: 15px;
}

The selector that uses .google-visualization-table-table explicitly becomes more specific than the one used by Google in their API, hence it is applied last and overrides what Google has hardcoded in their API.

Upvotes: 1

Abinaya Selvaraju
Abinaya Selvaraju

Reputation: 1292

I hope this will help you. Add data to the rows using data.setCell as below

data.addColumn('string', 'Name');
            data.addColumn('number', 'Salary');
            data.addColumn('boolean', 'Full Time');
            data.addRows(5);
            data.setCell(0, 0, 'John',null,{'className':'right'});
            data.setCell(0, 1, 10000, '$10,000');
            data.setCell(0, 2, true);

Here is the working sample.

For more google chart related queries visit jqfaq.com

Upvotes: 1

vee
vee

Reputation: 1246

A little more detail on exactly what CSS you are using would be helpful in answering this question. That said, I've be willing to bet this is related to your CSS selector specificity.

For example, using td { padding-left: 16px; } would probably not work, because the existing CSS rule of body.docs table th, body.docs table td { padding: 6px 10px; } would cascade over it.

However, something like this might work:

html body.docs table th,
html body.docs table td 
{
    padding-left: 16px;
}

See this link for more information on CSS specificity. Also, make sure that your table is not in an iframe, where you are declaring the CSS in a page that contains it; I was bitten by this earlier when investigating this problem (simply because I didn't realise it was there in the first place).

Upvotes: 0

Related Questions