Googleチャットテーブル内のセルに余白または余白を追加

Question

私はテーブルモードでGoogleのチャートを使用しています。テーブルから、境界から少し離れたコンテンツ（テキスト）を使用します。私はCSSでこれをやろうとしますが、パディング、マージン、およびそれらのバリアントは、これまでのところ動作しません。 tableCellプロパティ（Google ChartのテーブルのcssClassNamesプロパティの一部）にリンクされているCSSが動作しているため、境界線と背景を設定できます。しかし、パディングや余白などを設定しようとすると何も変わりません。では、境界線と表のコンテンツとの間に距離を作成するには、どうすればよいですか？使用しているCSSはこの質問に答えるのに役立つだろうまさに上https://developers.google.com/chart/interactive/docs/gallery/table

Answer 1

もう少し詳細を：

これは、私が使用していますGoogleのチャートテーブルです。それは、私はこれがあなたのCSSセレクターの特異性に関連していると確信しています。

例えば、td { padding-left: 16px; }を使用すると、既存のCSSルールbody.docs table th, body.docs table td { padding: 6px 10px; }がカスケードするため、おそらく機能しません。

しかし、このような何かがうまくいくかもしれない：

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

は、CSSの特異性についての詳細は、this linkを参照してください。また、テーブルがiframe内にないことを確認してください。そこには、CSSが含まれているページでそのCSSを宣言しています。私はこの問題を調査する際にこれまでにこれに噛まれていました（なぜなら、私はそれが最初にあったことを認識しなかったからです）。

Answer 2

これがあなたに役立つことを願っています。 はここ

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

以下のよう data.setCellを使用して行にデータを追加し、よりGoogleのチャートに関連するクエリが jqfaq.com

Answer 3

を訪問するためにworking sample.

である私は、同じ問題につまずいたと迅速に見つけることができませんでした答えも（きれいなものも）。

これを解決するために私が使用した解決策は、自分のCSSクラスをAPIで使用するよりも具体的にすることです。

前：

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

後.google-visualization-table-tableを使用して、セレクタは、明示的にので、それが最後に適用され、そのAPIは、Googleで使用されるものよりも具体的になり、Googleが持っているものよりも優先されます

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

APIでハードコードされています。