Table row border disappears on selection

Hello,

I am trying to style the selected row in a table. However, the border on the selected row disappears. What am I missing?

Please see code, CSS and screenshot below.

Thanks,
Ankie

@Theme("testvaadin")
public class TestvaadinUI extends UI {

    @Override
    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        final IndexedContainer ic = getContainer();
        
        final Table myTable = new Table();
        myTable.setWidth(30, Unit.PERCENTAGE);
        myTable.addStyleName("my-table-style");
        myTable.addStyleName(ValoTheme.TABLE_NO_VERTICAL_LINES);
        myTable.addStyleName(ValoTheme.TABLE_SMALL);
        myTable.addStyleName(ValoTheme.TABLE_NO_STRIPES);
        myTable.setContainerDataSource(ic);
        myTable.setPageLength(5);
        myTable.setVisibleColumns(new Object[] {"Prop_1", "Prop_2"});
        myTable.setColumnHeaders(new String[] {"Prop 1", "Prop 2"});
        myTable.setColumnHeaderMode(ColumnHeaderMode.EXPLICIT);
        myTable.setValue(myTable.getCurrentPageFirstItemId());
        myTable.setSortEnabled(false);
        myTable.select(ic.getIdByIndex(3));
        layout.addComponent(myTable);
        layout.setComponentAlignment(myTable, Alignment.MIDDLE_CENTER);
    }
    
    protected class MyObject {
        private String prop1;
        private String prop2;

        public MyObject(String prop1, String prop2) {
            super();
            this.prop1 = prop1;
            this.prop2 = prop2;
        }
        public String getProp1() {
            return prop1;
        }
        public void setProp1(String prop1) {
            this.prop1 = prop1;
        }
        public String getProp2() {
            return prop2;
        }
        public void setProp2(String prop2) {
            this.prop2 = prop2;
        }
    }
    
    @SuppressWarnings("unchecked")
    public IndexedContainer getContainer() {
        IndexedContainer container = new IndexedContainer();
        container.addContainerProperty("Prop_1", String.class, null);
        container.addContainerProperty("Prop_2", String.class, null);
        
        for (int i = 0 ; i < 5; i++) {
            MyObject myObject = new MyObject("Prop1-" + i, "Prop2-" + i);
            Item item = container.addItem(myObject);
            
            item.getItemProperty("Prop_1").setValue(myObject.getProp1());
            item.getItemProperty("Prop_2").setValue(myObject.getProp2());
        }
        
        return container;
    }
}
@import "../valo/valo.scss";

@mixin testvaadin {

    @include valo;
    .my-table-style .v-table-cell-content {
        background: white;
    }

    .my-table-style .v-selected.v-table-row {
        font-weight: bold;
        color: black;
    }

    .my-table-style .v-selected.v-table-row-odd {
        font-weight: bold;
        color: black;
    }
}

17744.jpg

Hello,

Did anyone get a change to look at this? Please help.

Thanks,
Ankie

FYI, in case someone encounters this issue. Adding the following CSS did the trick!

    .my-table-style .v-selected.v-table-row .v-table-cell-content {
        border-top: 1px solid #D4D4D4;
    }

    .my-table-style .v-selected.v-table-row-odd .v-table-cell-content {
        border-top: 1px solid #D4D4D4;
    }