0

I'm styling a TableView. I set the border color to white (same as background color) so it is invisible. However, when the table is focused, the border becomes blue. I tried adding table-view:focused { -fx-border-color: white; } to fix it, but it didn't help. How do I fix this?

I didn't add a screenshot because when I hit Print Screen the Table loses focus.

Below is my full stylesheet, if it's relevant:

.table-view .column-header,
.table-view .column-header .filler,
.table-view .column-header-background .filler {
    -fx-background-color: white;
    -fx-border-width: 0;
}

.table-view .column-header {
    -fx-font-size: 16px;
    -fx-border-width: 0 0 1 0;
    -fx-border-color: #efefef;
}

.table-view .column-header .label {
    -fx-alignment: center_left;
    -fx-font-size: 16pt;
    -fx-padding: 5 0 15 0;
}

.table-row-cell,
.table-row-cell:odd {
    -fx-background-color: white;
}

.table-row-cell:hover {
    -fx-background-color: #efefef;
}

.table-row-cell:selected {
    -fx-background-color: white;
    -fx-text-fill: black;
}

.table-view .table-cell {
    -fx-border-color: efefef;
    -fx-border-width: 1 0 0 0;
    -fx-font-size: 14px;
    -fx-padding: 5 3 15 3;
}

.table-view {
    -fx-border-color: white;
}

.table-view:focused .table-cell {
    -fx-text-fill: black;
}
Slaw
  • 37,820
  • 8
  • 53
  • 80
Allan Juan
  • 2,048
  • 1
  • 18
  • 42
  • 1
    try table-view:focus instead table-view:focused – to-b Aug 02 '20 at 11:48
  • 3
    `.table-view { -fx-focus-color: transparent; }` – anko Aug 02 '20 at 11:57
  • `table-view:focus` didn't work. `-fx-focus-color: transparent` did something odd - the focus border becomes _slightly_ thinner, but it remains there. I assume there's another element that's adding up to the border, besides `focus-color`? – Allan Juan Aug 02 '20 at 12:02
  • why do you want to confuse your users? – kleopatra Aug 02 '20 at 15:10
  • I tested it now and you are right @Allen Juan. You can add `-fx-faint-focus-color: transparent;`as well. It takes some time to get used to the default [modena.css](https://gist.github.com/maxd/63691840fc372f22f470) ;) – anko Aug 02 '20 at 19:12

1 Answers1

1

the blue border added to your table should be removed if you use the outline css property and set it to none. So , here set the outline : none for your table when focused.

.table-view:focus {
    outline: none;
}
Khushboo
  • 96
  • 5