将 CSS 边框分配给 google table 行

Question

我正在使用 google visualization table 制作一个 table 我尝试让每一行都有一个边框并像这样实现它：

不过，borderCSS好像不行。我怎样才能让它工作？而且，默认的 google table css 会高亮显示偶数行，而不是奇数行，这是怎么发生的？

Answer 1

Table 行没有边框。将边框分配给行中的 table 个单元格。

.rowodd .google-visualization-table-td {
    background-color: Linen;
    border: 4px solid #000000;
}

.rownormal .google-visualization-table-td {
    background-color: #EAF2D3;
    border: 4px solid #000000;
}

https://jsfiddle.net/MrLister/5u7ay1jj/5/

编辑：
重新考虑后，我怀疑你的意思是这样的，只在行周围添加边框，而不是在行中的单元格之间添加边框。

.rowodd .google-visualization-table-td {
    background-color: Linen;
    border: 4px solid #000000;
    border-width: 4px 0 0 0;
}

.rownormal .google-visualization-table-td {
    background-color: #EAF2D3;
    border: 4px solid #000000;
    border-width: 4px 0 0 0;
}
tr:last-child .google-visualization-table-td {
    border-bottom-width:4px;
}
.google-visualization-table-td:first-child {
    border-left-width:4px;
}
.google-visualization-table-td:last-child {
    border-right-width:4px;
}

https://jsfiddle.net/MrLister/5u7ay1jj/6/

将 CSS 边框分配给 google table 行

assign CSS Border to google table row

html

css

google-visualization