3

I want to find a way to set an entire column's background color in CellTable in GWT, but no luck. In CellTable's style, I only found the style cellTableLastColumn and cellTableFirstColumn which could be used to set the background color for the last and first column (Those two work fine). Does any body know how to set the entire column background color for any column by passing the column index as the parameter? Thank you very much.

Fan
  • 31
  • 1
  • 3

2 Answers2

4

You can use table.addColumnStyleName(colIndex, "mystyle") to tell CellTable to add mystyle to the table's <colgroup>. This results in HTML like

<table ...>
  <colgroup><col><col><col class="mystyle"><col>...</colgroup>
  ...

With a CSS rule like mystyle { background-color : #D0E4F6; }, this sets the background color of the whole column, including the header.

Unfortunately, this is not enough because the GWT CSS rules for even/odd rows will have priority and style all <td>'s of your column (except the header), overwriting your background color.

To fix this, use column.setCellStyleNames("mystyle") on the column. This causes the <td>'s of the column to receive the class mystyle. You can then use CSS like

.mystyle, td.mystyle {
  background-color : #D0E4F6;
}

to set the background color of the column (header) and the <td>'s.

Hbf
  • 3,074
  • 3
  • 23
  • 32
2

You can use addColumnStyleName to add a CSS class name to a column, just like you use addStyleName on a Widget.

Thomas Broyer
  • 64,353
  • 7
  • 91
  • 164
  • Thanks for the reply. addColumnStyleName seems only apply the style to the column header. When I set the background color by using this function, only the column header color changed, not the entire column in the CellTable. – Fan Jul 27 '11 at 12:04
  • The style passed in `addColumnStyleName` is added to the `col` HTML tag and therefore does apply for the _whole_ column. However, as the `CellTable` colors even and odd rows differently, the background color you set in your custom style gets overridden in the individual cells. I haven't tried this but I think that if you are willing to drop even/odd row coloring, you can use http://stackoverflow.com/questions/4194717/how-do-i-style-a-gwt-2-1-celltables-headers to remove the background-colors in the default style. – Hbf Aug 16 '11 at 11:46
  • (Continuing my comment above:) The default styles are these: http://www.google.com/codesearch#A1edwVHBClQ/user/src/com/google/gwt/user/cellview/client/CellTable.css – Hbf Aug 16 '11 at 11:50