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.

.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

mytable.addGeneratedColumn("highlight", new Table.ColumnGenerator() {
     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 {
.v-table-row-odd:hover .v-table-cell-content:first-child,
.v-table-row:hover .v-table-cell-content:first-child {