In einer Zelle in Google Kartentisch

Question

Ich bin mit einem Google-Chart im Tabellenmodus und in der Tabelle möchte ich den Inhalt (der Text) ein wenig Abstand von der Grenze Polsterung oder Rand aufweist. Ich versuche das mit CSS zu tun, aber Padding, Rand und ihre Varianten mit -links funktionieren bisher nicht. Die CSS, die mit der Tablecell Eigenschaft verknüpft ist (der Teil der cssClassNames Eigenschaft der Tabelle von Google-Diagramm ist) arbeitet, weil ich die Grenze und zurück Gelände kann. Aber wenn ich versuche, die Polsterung oder den Rand usw. einzustellen, ändert sich nichts. Was muss ich tun, um einen Abstand zwischen der Grenze und dem Inhalt in der Tabelle zu erstellen?

Dies ist die Google Chart Tabelle ich verwende: https://developers.google.com/chart/interactive/docs/gallery/table

Answer 1

Ein wenig mehr Details über genau das, was CSS Sie hilfreich wäre verwenden diese Frage zu beantworten. Das heißt, ich wette, dass dies mit Ihrer CSS-Selektorspezifität zusammenhängt.

Zum Beispiel würde wahrscheinlich td { padding-left: 16px; } nicht funktionieren, weil die vorhandene CSS-Regel von body.docs table th, body.docs table td { padding: 6px 10px; } würde darüber kaskadieren.

jedoch so etwas wie dies funktionieren könnte:

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

this link auf CSS Spezifität für weitere Informationen. Stellen Sie außerdem sicher, dass sich Ihre Tabelle nicht in einem Iframe befindet, in dem Sie das CSS auf einer Seite deklarieren, die es enthält. Ich wurde schon früher bei der Untersuchung dieses Problems gebissen (einfach weil ich nicht wusste, dass es überhaupt da war).

Answer 2

Ich hoffe, dies wird Ihnen helfen. Eingabe von Daten in den Zeilen data.setCell wie mit unter

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); 

die hier working sample.

Weiter Google Chart bezogenen Fragen besuchen jqfaq.com

Answer 3

ich auf das gleiche Problem gestoßen und nicht schnell finden kann, Antwort (noch eine saubere).

Die Lösung, die ich fix verwendet (Hack?) Das ist meine CSS-Klassen präziser als die von der API verwendet haben.

Vorher:

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

Nach

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

Der Wähler, die .google-visualization-table-table explizit verwendet wird präziser als die von Google in ihre API verwendet, daher ist es zuletzt angewendet und überschreibt, was Google hat in ihrer API fest codiert.