Add padding or margin to a cell in Google chart table

Question

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

Answer 1

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

Answer 2

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.