样式化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

您的CSS类名称正在被混淆。您应该使用Client Bundles（具体而言，CssResource）以确保使用正确的类名。

另外，请查看this。

Answer 2

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

请参阅解释如何摆脱这些默认浏览器CSS设置的this stackoverflow link。

以及this