Google grafik tablosundaki bir hücreye dolgu veya kenar boşluğu ekleme

Question

Tablo modunda bir Google grafik kullanıyorum ve tabloda içeriğin (metnin) kenarlıktan biraz uzak olmasını istiyorum. Bunu css ile yapmaya çalışıyorum ama doldurma, kenar boşluğu ve değişkenleri -left ile şu ana kadar çalışmaz. TableCell özelliğine bağlı olan css (google tablosu tablosunun cssClassNames özelliğinin bir parçasıdır) çalışıyor, çünkü kenarlık ve arka alanları ayarlayabilirim. Ancak, dolgu veya kenar boşluğu ayarlamaya çalıştığımda hiçbir şey değişmez. Peki, sınır ve tablodaki içerik arasında bir mesafe oluşturmak için ne yapmam gerekiyor?

Bu kullanıyorum Google grafik tablodur: https://developers.google.com/chart/interactive/docs/gallery/table

Answer 1

bu soruyu cevaplarken yardımcı olacaktır kullanarak tam olarak hangi CSS üzerine biraz daha ayrıntı. Bahse girerim, bunun bahse girmeye istekli olması CSS seçicinizin özgüllüğüyle ilgilidir. Örneğin, td { padding-left: 16px; } kullanarak, body.docs table th, body.docs table td { padding: 6px 10px; }'un varolan CSS kuralı bunun üzerinden kademeli olacağı için çalışmaz.

Ancak böyle bir şey işe yarayabilecek:

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

CSS niteliği hakkında daha fazla bilgi için this link bakınız. Ayrıca, tablonuzun, içeren bir sayfada CSS'yi bildirdiğiniz iframe içinde olmadığından emin olun; Bu problemi araştırırken daha önce bu konuda ısırılmıştım (basitçe ilk etapta olduğunu anlayamadığım için).

Answer 2

Umarım bu size yardımcı olur. İşte

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

daha google grafik ilgili sorular ziyaret edin working sample.

olduğu aşağıda data.setCell kullanarak satırlara veri ekleme jqfaq.com

Answer 3

Aynı sorun tökezledi ve hızlı bulamadık Cevap (ne de temiz bir tane).

Düzeltmek için kullandığım çözüm (hack?), CSS sınıflarımın API tarafından kullanılandan daha spesifik olmasını sağlamaktır.

önce:

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

.google-visualization-table-table açıkça, dolayısıyla son uygulandığı kendi API Google tarafından kullanılan olandan daha spesifik hale gelir kullanır ve Google neler geçersiz kılar seçici

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

sonra API'larında kodlanmış.