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?
John
(John Ahlroos)
April 30, 2014, 2:03pm
2
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;
}