如何消除tableview中編輯單元格的灰色背景

Question

問題

當您編輯表格單元格的行高度通常會變得更高，這是不需要行爲：

我設法消除這個CSS的高度變化：

.text-field-table-cell { 
    -fx-padding: 0; 
    -fx-background-insets: 0.0; 
} 
.text-field-table-cell .text-field { 
    -fx-padding: 0; 
    -fx-background-insets: 0.0; 
    -fx-background-color:yellow; 
    -fx-border-width: 0; 
} 

但是單元格仍然沒有充滿TextField。有一個灰色的背景可見：

問題

有誰知道如何消除編輯細胞的灰色背景？通過着色或去除它。

代碼

下面是完整的代碼，如果有人想測試一下：

InlineEditingTableViewCSS.java

public class InlineEditingTableViewCSS extends Application { 

    private final ObservableList<Data> data = 
     FXCollections.observableArrayList(
       new Data(1.,5.), 
       new Data(2.,6.), 
       new Data(3.,7.), 
       new Data(4.,8.) 
     ); 

    private TableView<Data> table; 

    @Override 
    public void start(Stage stage) { 

     // create edtiable table 
     table = new TableView<Data>(); 
     table.setEditable(true); 

     // column 1 contains numbers 
     TableColumn<Data, Number> number1Col = new TableColumn<>("Number 1"); 
     number1Col.setMinWidth(100); 
     number1Col.setCellValueFactory(cellData -> cellData.getValue().number1Property()); 
     number1Col.setCellFactory(createNumberCellFactory()); 

     // column 2 contains numbers 
     TableColumn<Data, Number> number2Col = new TableColumn<>("Number 2"); 
     number2Col.setMinWidth(100); 
     number2Col.setCellValueFactory(cellData -> cellData.getValue().number2Property()); 
     number2Col.setCellFactory(createNumberCellFactory()); 

     // add columns & data to table 
     table.setItems(data); 
     table.getColumns().addAll(number1Col, number2Col); 




     // switch to edit mode on keypress 
     // this must be KeyEvent.KEY_PRESSED so that the key gets forwarded to the editing cell; it wouldn't be forwarded on KEY_RELEASED 
     table.addEventFilter(KeyEvent.KEY_PRESSED, new EventHandler<KeyEvent>() { 
      @Override 
      public void handle(KeyEvent event) { 

       if(event.getCode() == KeyCode.ENTER) { 
//     event.consume(); // don't consume the event or else the values won't be updated; 
        return; 
       } 

       // switch to edit mode on keypress, but only if we aren't already in edit mode 
       if(table.getEditingCell() == null) { 
        if(event.getCode().isLetterKey() || event.getCode().isDigitKey()) { 

         TablePosition focusedCellPosition = table.getFocusModel().getFocusedCell(); 
         table.edit(focusedCellPosition.getRow(), focusedCellPosition.getTableColumn()); 

        } 
       } 

      } 
     }); 

     table.addEventFilter(KeyEvent.KEY_RELEASED, new EventHandler<KeyEvent>() { 
      @Override 
      public void handle(KeyEvent event) { 

       if(event.getCode() == KeyCode.ENTER) { 
        table.getSelectionModel().selectBelowCell(); 
       } 
      } 
     });  

     // single cell selection mode 
     table.getSelectionModel().setCellSelectionEnabled(true); 
     table.getSelectionModel().selectFirst(); 




     // add nodes to stage 
     BorderPane root = new BorderPane(); 
     root.setCenter(table); 

     Scene scene = new Scene(root, 800,600); 
     scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm()); 

     stage.setScene(scene); 
     stage.show(); 
    } 

    /** 
    * Number cell factory which converts strings to numbers and vice versa. 
    * @return 
    */ 
    private Callback<TableColumn<Data, Number>, TableCell<Data, Number>> createNumberCellFactory() { 

     Callback<TableColumn<Data, Number>, TableCell<Data, Number>> factory = TextFieldTableCell.forTableColumn(new StringConverter<Number>() { 

      @Override 
      public Number fromString(String string) { 
       return Double.parseDouble(string); 
      } 

      @Override 
      public String toString(Number object) { 
       return object.toString(); 
      } 
     }); 

     return factory; 
    } 

    /** 
    * Table data container 
    */ 
    public static class Data { 

     private final SimpleDoubleProperty number1; 
     private final SimpleDoubleProperty number2; 

     private Data(Double number1, Double number2) { 
      this.number1 = new SimpleDoubleProperty(number1); 
      this.number2 = new SimpleDoubleProperty(number2); 
     } 

     public final DoubleProperty number1Property() { 
      return this.number1; 
     } 

     public final double getNumber1() { 
      return this.number1Property().get(); 
     } 

     public final void setNumber1(final double number1) { 
      this.number1Property().set(number1); 
     } 

     public final DoubleProperty number2Property() { 
      return this.number2; 
     } 

     public final double getNumber2() { 
      return this.number2Property().get(); 
     } 

     public final void setNumber2(final double number2) { 
      this.number2Property().set(number2); 
     } 


    } 

    public static void main(String[] args) { 
     launch(args); 
    } 


} 

application.css

.text-field-table-cell { 
    -fx-padding: 0; 
    -fx-background-insets: 0.0; 
} 
.text-field-table-cell .text-field { 
    -fx-padding: 0; 
    -fx-background-insets: 0.0; 
    -fx-background-color:yellow; 
    -fx-border-width: 0; 
} 

還是有找到o的好機制ut節點當前正在使用哪個CSS？

非常感謝！

Answer 1

有誰知道如何消除 編輯細胞的灰色背景？

對於文本字段設置填充值：

.text-field-table-cell { 
    -fx-padding: 0; 
    -fx-background-insets: 0.0; 
} 
.text-field-table-cell .text-field { 
    -fx-padding: 3 0 3 0; 
    -fx-background-insets: 0.0; 
    -fx-background-color:yellow; 
    -fx-border-width: 0; 
}