CSS and JavaFX - CSS in a TableView

Question

I want to apply css in all of my upper side of the tableview, the following photo show the part I want to apply the css (The part at the side of the column "Estado")

enter image description here

here's my css:

.table-view{
   -fx-background-color: transparent;
}

.table-view:focused{
    -fx-background-color: transparent;
}

.table-view .column-header-background{
    -fx-background-color: linear-gradient(#101010 0%, #424141 100%);
}

.table-view .column-header-background .label{
    -fx-background-color: transparent;
    -fx-text-fill: white;
}

.table-view .column-header {
    -fx-background-color: transparent;
}

.table-view .table-cell{
    -fx-text-fill: white;
}

.table-row-cell{
    -fx-background-color: -fx-table-cell-border-color, #616161;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em; 
}

.table-row-cell:odd{
    -fx-background-color: -fx-table-cell-border-color, #424242;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em;
}

.table-row-cell:selected {
    -fx-background-color: #005797;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
}

The part is white because it isn't a column of my tableview, so I want to know how to apply CSS in empty parts (without columns) in the table.

FXML code:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<HBox prefHeight="300.0" prefWidth="773.0" 
      stylesheets="/iftorrent/gui/menuPrincipal/MenuPrincipalCSS.css" 
      xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" 
      fx:controller="iftorrent.gui.menuPrincipal.MenuPrincipalControlador">
    <children>
        <TableView fx:id="tabela" prefWidth="773.0">
            <columns>
                <TableColumn fx:id="numero" prefWidth="35.0" text="Nº " />
                <TableColumn fx:id="nome" prefWidth="183.0" text="Nome" />
                <TableColumn fx:id="tamanho" prefWidth="76.0" text="Tamanho" />
                <TableColumn fx:id="velocidade" prefWidth="76.0" text="Velocidade" />
                <TableColumn fx:id="tempo_estimado" prefWidth="120.0" text="Tempo Estimado" />
                <TableColumn fx:id="estado" prefWidth="283.0" text="Estado" />
                <TableColumn fx:id="progresso" prefWidth="283.0" text="Progresso" /> 
            </columns>
        </TableView>
    </children>
</HBox>

Answer 1

You are looking for the .filler inside the .column-header-background . Add this rule:

.table-view .column-header-background .filler {
    -fx-background-color: linear-gradient(#101010 0%, #424141 100%);
}

For reference, you can use the JavaFX CSS Reference , or use the CSS Analyzer tool built into SceneBuilder.