6 Replies Latest reply: Feb 26, 2013 11:51 AM by 949137 RSS

    TableView column headers do not line up with rows

      Right now I have a tableview with column headers that are wider than the cells in the rows of the table.
      Anyone know what property or css style I need to adjust to give the cells a little more padding? I have not had any luck searching the web or these forums.

      Edited by: astep on Feb 26, 2013 6:59 AM
        • 1. Re: TableView column headers do not line up with rows
          Still looking for an answer, played around with padding and it seemed to make the cells taller instead of wider

          .table-cell {
               -fx-padding: 10px;
          • 2. Re: TableView column headers do not line up with rows
            I've never seen this happen. Can you post a short, complete executable that shows the problem?
            • 3. Re: TableView column headers do not line up with rows
              I played around with padding, size, border, inset for both table cell and table row cell with no luck yet

              Sample screen shot

              • 4. Re: TableView column headers do not line up with rows
                working on one now.... Maybe I'll find the solution as I strip the table out of a more complex project
                • 5. Re: TableView column headers do not line up with rows
                  Sorry it took me a little bit to strip things down and create the project. I used NetBeans to reproduce the effect and I tried to follow the same pattern in case it had a side effect. Sorry there is so much code here for such a simple demo. I'm going to play around with it some to see if removing some of the css eliminates the effect.

                  <?xml version="1.0" encoding="UTF-8"?>
                  <?import java.lang.*?>
                  <?import java.util.*?>
                  <?import javafx.scene.*?>
                  <?import javafx.scene.control.*?>
                  <?import javafx.scene.layout.*?>
                  <AnchorPane fx:id="ConstraintsAnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="460.0" prefWidth="480.0" style="-fx-background-color:black" xmlns:fx="http://javafx.com/fxml" fx:controller="testtableview.SampleController">
                      <TitledPane fx:id="ConstraintsTitlePane" alignment="CENTER" animated="false" collapsible="false" contentDisplay="CENTER" opacity="0.75" text="Constraints by Stream Class">
                          <TableView fx:id="constraintsTableView" prefHeight="445.0" prefWidth="480.0" />
                  .root {
                  -fx-base: rgb(50, 50, 50);
                  -fx-background: rgb(50, 50, 50);
                  -fx-control-inner-background:  rgb(50, 50, 50);
                  .table-view {
                       -fx-prompt-text-fill: White;
                  .table-cell {
                       -fx-border-color: black;
                  .table-cell:hover {
                       -fx-background: DimGray;
                       -fx-background-color: DimGray;
                  .table-cell:selected {
                       -fx-background: DimGray;
                       -fx-background-color: DimGray;
                  .table-row-cell {
                       -fx-border-color: black;
                       -fx-control-inner-background: black;
                  .table-row-cell:hover {
                       -fx-background: DimGray;
                       -fx-background-color: DimGray;
                  .table-row-cell:selected {
                       -fx-background: DimGray;
                       -fx-background-color: DimGray;
                  package testtableview;
                  import javafx.application.Application;
                  import javafx.fxml.FXMLLoader;
                  import javafx.scene.Parent;
                  import javafx.scene.Scene;
                  import javafx.stage.Stage;
                  public class TestTableView extends Application {
                      public void start(Stage stage) throws Exception {
                          Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));
                          Scene scene = new Scene(root);
                      public static void main(String[] args) {
                  package testtableview;
                  import javafx.beans.property.SimpleStringProperty;
                  import javafx.collections.FXCollections;
                  import javafx.collections.ObservableList;
                  public class Model {
                       private static Constraint temp = new Constraint();
                       private static Model instance = null;
                       private Model() {
                       public static Model getInstance() {
                            if (instance == null) {
                                 instance = new Model();
                            return instance;
                       private static ObservableList<Constraint> constraintsList = FXCollections
                       public ObservableList<Constraint> getConstraintsList() {
                            return constraintsList;
                       public static class Constraint {
                            private SimpleStringProperty ColumnOne = null;
                            private SimpleStringProperty ColumnTwo = null;
                            private SimpleStringProperty ColumnThree = null;
                            private SimpleStringProperty ColumnFour = null;
                            private SimpleStringProperty ColumnFive = null;
                            private SimpleStringProperty ColumnSix = null;
                            private SimpleStringProperty ColumnSeven = null;
                            public String getColumnOne() {
                                 return ColumnOne.get();
                            public void setColumnOne(String input) {
                            public String getColumnTwo() {
                                 return ColumnTwo.get();
                            public void setColumnTwo(String input) {
                            public String getColumnThree() {
                                 return ColumnThree.get();
                            public void setColumnThree(String input) {
                            public String getColumnFour() {
                                 return ColumnFour.get();
                            public void setColumnFour(String input) {
                            public String getColumnFive() {
                                 return ColumnFive.get();
                            public void setColumnFive(String input) {
                            public String getColumnSix() {
                                 return ColumnSix.get();
                            public void setColumnSix(String input) {
                            public String getColumnSeven() {
                                 return ColumnSeven.get();
                            public void setColumnSeven(String input) {
                            public Constraint() {
                                 this.ColumnOne = new SimpleStringProperty("");
                                 this.ColumnTwo = new SimpleStringProperty("");
                                 this.ColumnThree = new SimpleStringProperty("");
                                 this.ColumnFour = new SimpleStringProperty("");
                                 this.ColumnFive = new SimpleStringProperty("");
                                 this.ColumnSix = new SimpleStringProperty("");
                                 this.ColumnSeven = new SimpleStringProperty("");
                  package testtableview;
                  import testtableview.Model.Constraint;
                  import javafx.collections.FXCollections;
                  import javafx.collections.ObservableList;
                  import javafx.scene.control.TableColumn;
                  import javafx.scene.control.TableView;
                  import javafx.scene.control.cell.PropertyValueFactory;
                  public class ConstraintsTableViewModel {
                       private static TableView<Constraint> table = new TableView<Constraint>();
                       private static ObservableList<TableColumn<Constraint, String>> columnList = FXCollections
                       public static TableView<Constraint> setupView() {
                            TableColumn<Constraint, String> ColumnOneCol = new TableColumn<Constraint, String>("Example Exam1");
                            ColumnOneCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnOne"));
                            TableColumn<Constraint, String> ColumnTwoCol = new TableColumn<Constraint, String>("Example 2");
                            ColumnTwoCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnTwo"));
                            TableColumn<Constraint, String> ColumnThreeCol = new TableColumn<Constraint, String>("Example3");
                            ColumnThreeCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnThree"));
                            TableColumn<Constraint, String> ColumnFourCol = new TableColumn<Constraint, String>("Example4");
                            ColumnFourCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnFour"));
                            TableColumn<Constraint, String> ColumnFiveCol = new TableColumn<Constraint, String>("Example5");
                            ColumnFiveCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnFive"));
                            TableColumn<Constraint, String> ColumnSixCol = new TableColumn<Constraint, String>("Example6");
                            ColumnSixCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnSix"));
                            TableColumn<Constraint, String> ColumnSevenCol = new TableColumn<Constraint, String>("Exam7");
                            ColumnSevenCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnSeven"));
                            return table;
                  package testtableview;
                  import testtableview.Model.Constraint;
                  import java.net.URL;
                  import java.util.ResourceBundle;
                  import javafx.fxml.FXML;
                  import javafx.fxml.Initializable;
                  import javafx.scene.control.TableView;
                  public class SampleController implements Initializable {
                       private TableView<Constraint> constraintsTableView;
                       private Model cm = null;
                      public void initialize(URL url, ResourceBundle rb) {
                          cm = Model.getInstance();
                  • 6. Re: TableView column headers do not line up with rows
                    After some experimentation I've discovered that the following css is what causes the effect

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

                    the style doesn't seem to be part of caspian.css

                    if I replace the style with: -fx-table-cell-border-color: black;

                    I get the same style effect an no "squishing" of the cells in relation to the column headers

                    Thanks for pushing me to experiment with the code!