css - 样式化 DataGrid GWT

Question

我正在使用 vanilla GWT DataGrid(com.google.gwt.user.cellview.client.DataGrid)来构建一个表。为了使用 CSS 样式，我使用了类似的方法，描述了How to override CellTable css。

我需要为整个表格应用边框。我可以使用.dataGridCell.

/**
* Applied to every cell.
*/
.dataGridCell {
  padding: standard-cell-padding;
  border-bottom: 1px solid #6f7277;
  border-left: 1px solid #6f7277;
  border-right: 1px solid #6f7277;
  border-top: 1px solid #6f7277;
  overflow: hidden;
}

但随后在交叉路口，边框变为粗体，页面看起来不太好。

在 css 中定义了另一个类，如下所示。

/**
* Applied to the table.
*/  
.dataGridWidget {
}

似乎即使我更改了此类的值，它也没有任何效果。有谁知道如何完成这项工作？

Answer 1

由于浏览器插入了一些样式，交叉点显示为粗体。在 Chrome 中，它们出现在检查器中，user agent stylesheet 特别是使交叉路口的边框看起来很厚的原因是border-collapse: separate;

请参阅此 stackoverflow 链接，该链接解释了如何摆脱这些默认浏览器 css 设置。

还有这个

Answer 2

您的 CSS 类名被混淆了。您应该使用Client Bundles（特别是CssResource）以确保使用正确的类名。

另外，看看这个。