Thêm đệm hoặc lề vào ô trong bảng biểu đồ Google

Question

Tôi đang sử dụng biểu đồ Google ở ​​chế độ bảng và trong bảng tôi muốn nội dung (văn bản) có một khoảng cách nhỏ từ đường viền. Tôi cố gắng làm điều đó với css nhưng padding, lề và các biến thể của họ với -left không hoạt động cho đến nay. Các css được liên kết với thuộc tính tableCell (là một phần của thuộc tính cssClassNames của bảng biểu đồ google) đang hoạt động, vì tôi có thể thiết lập đường viền và mặt sau. Nhưng khi tôi cố gắng để đặt padding hoặc lề vv không có gì thay đổi. Vậy tôi cần phải làm gì để tạo khoảng cách giữa đường viền và nội dung trong bảng?

Đây là bảng biểu đồ Google Tôi đang sử dụng: https://developers.google.com/chart/interactive/docs/gallery/table

Answer 1

Một chút chi tiết hơn về chính xác những gì bạn đang sử dụng CSS sẽ rất hữu ích trong việc trả lời câu hỏi này. Điều đó nói rằng, tôi đã sẵn sàng để đặt cược này có liên quan đến đặc tính chọn CSS của bạn.

Ví dụ: sử dụng td { padding-left: 16px; } có thể không hoạt động, vì quy tắc CSS hiện tại của body.docs table th, body.docs table td { padding: 6px 10px; } sẽ xếp chồng lên trên.

Tuy nhiên, một cái gì đó như thế này có thể làm việc:

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

Xem this link để biết thêm thông tin về CSS đặc hiệu. Ngoài ra, hãy đảm bảo rằng bảng của bạn không nằm trong iframe, nơi bạn đang khai báo CSS trong trang chứa nó; Tôi đã bị cắn bởi điều này trước đó khi điều tra vấn đề này (đơn giản là vì tôi đã không nhận ra nó đã có ở nơi đầu tiên).

Answer 2

Tôi hy vọng điều này sẽ giúp bạn. Thêm dữ liệu vào các hàng sử dụng data.setCell như sau

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

Đây là working sample.

Để biết thêm google biểu đồ liên quan đến truy vấn tham jqfaq.com

Answer 3

tôi stumbled khi cùng một vấn đề và không thể tìm thấy một cách nhanh chóng câu trả lời (cũng không phải là một trong sạch).

Giải pháp tôi đã sử dụng để sửa (hack?) Điều này là để các lớp CSS của tôi cụ thể hơn các lớp CSS được API sử dụng.

Trước:

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

Sau

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

Bộ chọn có sử dụng .google-visualization-table-table rõ ràng trở nên cụ thể hơn một Google sử dụng trong API của họ, do đó nó được áp dụng cuối cùng và ghi đè những gì Google có mã hóa cứng trong API của họ.