Question

I have created a flextable through the Gwt UI binder.

I would like to have a gray background, horizontal white borders between rows, and no further borders.

My latest attempt is given below but does not display the white horizontal

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
   xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:my='urn:import:mywidgets.client.ui.widgets'>
<ui:with field='res' type='myconstants' />

<ui:style>
   .table-style {
   background-color: silver;
   td { border-bottom: 1px solid #000 }
   }
</ui:style>  

<g:HTMLPanel>
    <g:FlexTable ui:field="table" borderWidth="0" styleName="{style.table-style}" />
</g:HTMLPanel>
</ui:UiBinder>

I must admit that I am pretty weak with css, so it is possible that this example is simply invalid.

Edit: JankiPanwala answered the question.

I have simply added my final stylesheet below for future reference.

  .table-style{
  background-color: silver;
  border-collapse: collapse;
  }
  .table-style td{
  border-bottom:2px solid white;
  } 

Answer 1

You can try following style:

.table-style td{
  border-bottom:1px solid #000;
  background-color: silver;
}

Apply table-style to your flex table