Hinzufügen von padding oder margin, um eine Zelle in Google-Diagramm-Tabelle

Ich bin mit einem Google-Diagramm in der Tabelle-Modus und in der Tabelle möchte ich den Inhalt (den text) ein wenig Abstand von der Grenze. Ich versuche zu tun, die mit css, aber padding, margin (Rand) und deren Varianten mit -Links nicht funktioniert so weit. Die css, die mit der tableCell Eigenschaft (die ist Teil der cssClassNames-Eigenschaft der Tabelle der google-chart) arbeiten, denn ich kann setzen die Grenze und zurück Gründen. Aber wenn ich versuche, um die padding oder margin etc. es ändert sich nichts. Also, was muss ich tun, um eine Distanz zu schaffen zwischen der Grenze und dem Inhalt in der Tabelle?

Dies ist die Google-Diagramm-Tabelle die ich benutze: https://developers.google.com/chart/interactive/docs/gallery/table

  • Diese Funktion scheint nicht zu existieren noch (Juni 2016). Übrigens, die gleiche Frage auf webapps
InformationsquelleAutor Cornelis | 2013-07-05
  1. 1

    Ich hoffe das wird Ihnen helfen.
    Hinzufügen von Daten zu den Zeilen mit data.setCell wie unten

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

    Hier ist die Beispiel arbeiten.

    Weitere google-Diagramm-bezogenen Anfragen besuchen jqfaq.com

    • "Beispiel" scheint nicht zu "arbeiten". Ich sehe keine Polsterung
    InformationsquelleAutor Abinaya Selvaraju
  2. 1

    Stolperte ich über das gleiche problem und konnte Sie nicht finden, eine schnelle Antwort (noch sauber ist).

    Die Lösung, die ich verwendet, um zu beheben (hack?) das ist meine CSS-Klassen spezifischer als der des API.

    Bevor:

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

    Nach

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

    Den Selektor verwendet .google-visualization-table-table explizit wird genauer als die Verwendung von Google in Ihrer API, daher ist es zuletzt angewendet und überschreibt die von Google hardcoded in Ihrer API.

    InformationsquelleAutor Benoit Duffez
  3. 0

    Ein wenig mehr detail auf, was genau Sie CSS verwenden, wäre hilfreich bei der Beantwortung dieser Frage. Das heißt, ich habe sein bereit zu Wetten, das hängt mit deinem CSS-Selektor-Spezifität.

    Beispielsweise mit td { padding-left: 16px; } würde wahrscheinlich nicht funktionieren, weil die vorhandene CSS-Regel von body.docs table th, body.docs table td { padding: 6px 10px; } sprühte über ihn.

    Jedoch so etwas wie dies funktionieren könnte:

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

    Sehen dieser link für weitere Informationen über CSS-Spezifität. Auch, stellen Sie sicher, dass Ihre Tabelle ist nicht in einem iframe, wo Sie deklarieren des CSS in eine Seite, die es enthält; ich wurde gebissen, durch diese früher, bei der Untersuchung dieses Problems (einfach, weil ich wusste nicht, war es in den ersten Platz).

    InformationsquelleAutor vee
Schreibe einen Kommentar