How not differ tableview focused rows from other rows? - css

Question

I have a tableview in JavaFX and I don't want focused row to differ from others. The problem is that when I click on a row and select it, the row's bottom border goes away. Which css property makes it and how can I fix that?
In the attached screen shot all rows selected, and my last click was on "nature" row.
MCVE:
Main.java:
import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.input.MouseButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
HBox hBox = new HBox();
Scene scene = new Scene(hBox, 300, 275);
scene.getStylesheets().add("main.css");
TableView<Keyword> keywordsTable = new TableView<>();
TableColumn<Keyword, String> wordColumn = new TableColumn<>();
ObservableList<Keyword> data = FXCollections.observableArrayList();
wordColumn.setCellValueFactory(new PropertyValueFactory<>("word"));
keywordsTable.getColumns().add(wordColumn);
keywordsTable.setItems(data);
keywordsTable.setRowFactory(param -> {
TableRow<Keyword> row = new TableRow<>();
row.addEventFilter(MouseEvent.MOUSE_CLICKED, e -> {
keywordsTable.requestFocus();
if (!row.isEmpty() && e.getButton().equals(MouseButton.PRIMARY)) {
changeRowSelection(keywordsTable, row.getItem(), row.getIndex());
}
e.consume();
});
row.addEventFilter(MouseEvent.MOUSE_PRESSED, e -> {
keywordsTable.requestFocus();
e.consume();
});
return row;
});
keywordsTable.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
data.add(new Keyword("one"));
data.add(new Keyword("two"));
data.add(new Keyword("three"));
data.add(new Keyword("four"));
data.add(new Keyword("five"));
hBox.getChildren().add(keywordsTable);
primaryStage.setScene(scene);
primaryStage.show();
}
private void changeRowSelection(TableView table, Keyword keyword, int index) {
if (table.getSelectionModel().getSelectedItems().contains(keyword)) {
table.getSelectionModel().clearSelection(index);
} else {
table.getSelectionModel().select(index);
}
}
public static void main(String[] args) {
launch(args);
}
public class Keyword {
private final SimpleStringProperty word;
public Keyword(String word) {
this.word = new SimpleStringProperty(word);
}
public String getWord() {
return word.get();
}
public void setWord(String word) {
this.word.set(word);
}
}
}
main.css:
.table-row-cell:focused {
-fx-background-insets: 0;
-fx-padding: 0;
}
.list-cell:filled:selected,
.tree-cell:filled:selected,
.table-row-cell:filled:selected,
.tree-table-row-cell:filled:selected,
.table-row-cell:filled > .table-cell:selected,
.tree-table-row-cell:filled > .tree-table-cell:selected {
-fx-background: #C7E8EA;
-fx-table-cell-border-color: #26ABD7 !important;
-fx-text-fill: black;
}
.table-row-cell:focused {
-fx-background-insets: 0 0 0;
}
.table-cell {
-fx-background-insets: 0 !important;
}

Answer 1

It worked for me with the following css
see for information : https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html
.table-view {
-my-bg-color: #C7E8EA;
-my-bd-color: violet;
}
.table-row-cell {
-fx-background: -my-bg-color;
-fx-background-color: -my-bd-color, -fx-background;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0;
-fx-text-fill: black;
}
.table-cell {
-fx-padding: 0.166667em; /* 2px, plus border adds 1px */
-fx-background-color: null;
-fx-border-color: transparent -my-bd-color transparent transparent;
-fx-cell-size: 2.0em; /* 24 */
-fx-text-fill: -fx-text-background-color;
}
Note the custom css variable definition in .table-view. This is not mandatory, just for convenience.