Question

我正在使用<?xml version="1.0"?> <Data> [your stuff goes here] </Data>创建一个表格，我尝试让每一行都有一个边框，然后像这样实现：

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

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/

将CSS边框指定给Google表格行

1 个答案: