При выборе поменять таблицу цветов фона, сохраняя выделение

Question

Я хочу изменить цвет фона tableView (javafx), когда он выбран, но у меня есть маленькая синяя линия (того же цвета, что и подсветка), которая появляется: пример

Вот мой код CSS:

.table-view {
    -fx-faint-focus-color: transparent;
    -fx-focus-color: transparent;
}
.table-view .table-row-cell:selected {
    -fx-body-color: #CEDAE3;
    -fx-background-color: #CEDAE3;
    -fx-text-fill: black;
}
.table-view:focused {
  -fx-background-color: transparent,-fx-box-border,-fx-control-inner-background;
}

Вы можете мне помочь?

Answer 1

Таблица стилей по умолчанию, modena.css, имеет правило

.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected {
    -fx-background: -fx-selection-bar;
    -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}

Устанавливает -fx-background искомый цвет в ячейке в выбранной строке равным -fx-selection-bar, а -fx-table-cell-border-color искомый цвет - на 20% светлее, чем он.

table-cell определяет цвет границы с помощью

.table-cell {
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
    -fx-background-color: null;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-background-color;
}

Следовательно, в ячейке в выбранной строке вы видите правую границу, определенную как -fx-selection-bar.

Значение по умолчанию для -fx-selection-bar находится в верхней части таблицы стилей:

/* A bright blue for highlighting/accenting objects.  For example: selected
 * text; selected items in menus, lists, trees, and tables; progress bars */
-fx-accent: #0096C9;

/* ... */

-fx-selection-bar: -fx-accent;

Таким образом, вы можете удалить эту границу, переопределив -fx-accent для табличного представления:

.table-view {
    -fx-accent: transparent ;
    -fx-faint-focus-color: transparent;
    -fx-focus-color: transparent;
}

Answer 2

Вы можете использовать эти правила для изменения цвета внешней и внутренней границ таблицы:

.table-row-cell:selected {
    -fx-border-color: black;
    -fx-table-cell-border-color: black;
}