Google Charts Table：在整个表格周围设置边框，但不是单个元素答案

【问题标题】：Google Charts Table: setting border around entire table, but not individual elementsGoogle Charts Table：在整个表格周围设置边框，但不是单个元素
【发布时间】：2014-01-13 21:12:08
【问题描述】：

我已经能够使用文档here 使用带有 CSS 的“tableCell”（通过“cssClassNames”）设置表格每个单元格的边框厚度。但是，我无法弄清楚如何在不影响单个单元格的情况下在整个表格周围制作边框。

我不确定这是否支持，如果有人知道如何执行此操作，请告诉我。

我正在使用 JSON 和 PHP 来生成我的数据，以防万一。

【问题讨论】：

标签： php css json google-visualization

【解决方案1】：

在 CSS 中为表格的容器 div 设置边框：

#myTableDiv {
    border: 2px solid #8367d9;
}

[编辑]

如果您在可视化选项中设置表格的尺寸，则需要在 css 中使用更具体的选择器：

#myTableDiv > div > div {
    border: 2px solid #8367d9;
}

或者您需要将容器 div 设置为显示为内联块：

#myTableDiv {
    border: 2px solid #8367d9;
    display: inline-block;
}

如果它在您的情况下可行，我建议您使用第二种方法，因为第一种方法需要在您有可滚动表格时进行改进以使其工作。

【讨论】：

我试过了，现在有一个边框，但它比物理表大小要大得多。当我调用 chart.draw() 时，我在选项中使用了“width:500,height:300”，并且图表本身反映了这些尺寸，但由于某种原因，表格的容器比这个大 - 它适合整个水平宽度的页面。任何想法如何同步这些？
除非您在 CSS 中设置 div 的宽度，否则它总是尽可能多地占用宽度。当您在选项中设置表格的尺寸时，它们会设置在容器 div 的孙 div 上，因此您需要使用 #myTableDiv > div > div 作为选择器，或者您需要将容器 div 的 display 属性设置为inline-block。我会用详细信息更新答案。
谢谢，“inline-block”做到了！