Table - show marker bar in front of row on hovering

I’m trying to style a table so that on row hovering a marker bar is shown in the first cell of the row.

[code]
.v-table-row, .v-table-row-odd {
.v-table-cell-content:first-child {
border-left: 8px solid white;
}
}

.v-table-row:hover, .v-table-row-odd:hover {
.v-table-cell-content:first-child {
border-left: 8px solid black;
}
}
[/code]Unfortunately it’s not working as expected since the following columns get distorted:

Any ideas on how to solve this?

Table’s column width measurements are very sensitive when it comes to changing the borders and paddings with CSS.

What I would do is to add a generated column to the table as the
first
column

mytable.addGeneratedColumn("highlight", new Table.ColumnGenerator() {
     @Override
     public Object generateCell(Table source, Object itemId, Object columnId) {
          return null;
     }
});
mytable.setColumnHeader("highlight", "");
mytable.setColumnWidth("highlight", 0);

And then just style that generated columns cells with

.v-table-row-odd .v-table-cell-content:first-child,
.v-table-row .v-table-cell-content:first-child {
     background:white;  
}
 
.v-table-row-odd:hover .v-table-cell-content:first-child,
.v-table-row:hover .v-table-cell-content:first-child {
      background:black;
}