樣式DataGrid GWT

我使用vanilla GWT DataGrid (com.google.gwt.user.cellview.client.DataGrid)來構造一個表。爲了玩CSS樣式，我使用了中描述的類似方法。樣式DataGrid GWT

我需要對整個表應用邊框。我可以使用.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; 
}

但是，然後在十字路口的邊界變得粗體和頁面看起來不太好。

enter image description here

有在如下的CSS中定義的另一個類。

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

它似乎即使我改變了這個類的值，它沒有任何影響。有沒有人知道如何完成這項工作？

來源

2013-03-26 ravindrab

也有類名爲第一列/細胞，最後一列/細胞和不均勻的行和偶數行。例如，您可以在單元格上使用border-right，並在最後一列使用border-right：0。最好的事情是使用Chrome開發人員工具直接修改樣式，然後將它們複製到您的樣式表中以便使用CellTable/DataGrid – 2013-03-27 09:10:57

您的CSS類名稱正被混淆。您應該使用Client Bundles（特別是，CssResource）以確保使用正確的類名稱。

另外，請看this。

來源

2013-03-27 00:55:02 enrybo

由於瀏覽器插入的某些樣式，交集顯示爲粗體。在Chrome中，他們顯示在檢查作爲user agent stylesheet 尤其是什麼讓邊界出現在路口厚是該border-collapse: separate;

見this stackoverflow link解釋如何擺脫這些默認瀏覽器CSS設置。

並且還this

來源

2014-12-27 13:35:10 Spiff

樣式DataGrid GWT

回答

相關問題