2

I am using vanilla GWT DataGrid (com.google.gwt.user.cellview.client.DataGrid) to construct a table. To play with the CSS styles I am using a similar approach described How to override CellTable css.

I need to apply a border to the entire table. I can apply borders to individual cells using .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;
}

But then in the intersections the border becomes bold and page doesn't look nice.

enter image description here

There is another class defined in the css as below.

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

It seems even I changed values for this class, it doesn't has any effect. Does any one know how to get this done?

ravindrab
  • 2,712
  • 5
  • 27
  • 37
  • 1
    there are also classnames for first column/cell, last column/cell and uneven and even rows. You could use border-right on the cells for example and have border-right:0 on the last column. The best thing is to use Chrome Developer Tools modify the styles directly and then copy them into your stylesheet for your CellTable/DataGrid – Ümit Mar 27 '13 at 09:10

2 Answers2

0

Your CSS class names are being obfuscated. You should use Client Bundles (specifically, CssResource) in order to ensure that the right class names are used.

Also, take a look at this.

enrybo
  • 1,787
  • 1
  • 12
  • 20
0

The intersections show up as bold because of some styles that the browser is inserting. In Chrome they show up in inspector as user agent stylesheet In particular what makes the borders appear thick in the intersections is this border-collapse: separate;

See this stackoverflow link that explains how to get rid of these default browser css settings.

and also this

Community
  • 1
  • 1
Spiff
  • 3,873
  • 4
  • 25
  • 50