html - 将 CSS 边框分配给谷歌表格行

Question

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

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

但是，border CSS 似乎不起作用。我怎样才能让它工作？而且，默认的 google table css 会突出显示偶数行，而不是奇数行，这是怎么发生的？

Answer 1

表格行没有边框。而是将边框分配给行中的表格单元格。

.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/