This discussion is archived
6 Replies Latest reply: Feb 26, 2013 9:51 AM by 949137 RSS

TableView column headers do not line up with rows

949137 Newbie
Currently Being Moderated
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
    949137 Newbie
    Currently Being Moderated
    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
    James_D Guru
    Currently Being Moderated
    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
    949137 Newbie
    Currently Being Moderated
    I played around with padding, size, border, inset for both table cell and table row cell with no luck yet

    Sample screen shot

    http://i.imgur.com/U8Q2Abd.jpg
  • 4. Re: TableView column headers do not line up with rows
    949137 Newbie
    Currently Being Moderated
    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
    949137 Newbie
    Currently Being Moderated
    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.

    Sample.fxml
    <?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">
      <children>
        <TitledPane fx:id="ConstraintsTitlePane" alignment="CENTER" animated="false" collapsible="false" contentDisplay="CENTER" opacity="0.75" text="Constraints by Stream Class">
          <content>
            <TableView fx:id="constraintsTableView" prefHeight="445.0" prefWidth="480.0" />
          </content>
        </TitledPane>
      </children>
    </AnchorPane>
    stylesheet.css
    .root {
    -fx-base: rgb(50, 50, 50);
    -fx-background: rgb(50, 50, 50);
    -fx-control-inner-background:  rgb(50, 50, 50);
    }
    
    .table-view {
    -fx-table-cell-border-color:derive(-fx-base,+10%);
    -fx-table-header-border-color:derive(-fx-base,+20%);
    }
    .text-field{
         -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;
    }
    TestTableView.java
    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 {
        
        @Override
        public void start(Stage stage) throws Exception {
            Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));
            
            Scene scene = new Scene(root);
            
            stage.setScene(scene);
            scene.getStylesheets().add(TestTableView.class.getResource("stylesheet.css").toExternalForm());
            stage.show();
        }
    
        public static void main(String[] args) {
            launch(args);
        }
    }
    Model.java
    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();
    
                   constraintsList.add(temp);
              }
    
              return instance;
         }
    
         private static ObservableList<Constraint> constraintsList = FXCollections
                   .observableArrayList();
    
         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) {
                   ColumnOne.set(input);
              }
    
              public String getColumnTwo() {
                   return ColumnTwo.get();
              }
    
              public void setColumnTwo(String input) {
                   ColumnTwo.set(input);
              }
    
              public String getColumnThree() {
                   return ColumnThree.get();
              }
    
              public void setColumnThree(String input) {
                   ColumnThree.set(input);
              }
    
              public String getColumnFour() {
                   return ColumnFour.get();
              }
    
              public void setColumnFour(String input) {
                   ColumnFour.set(input);
              }
    
              public String getColumnFive() {
                   return ColumnFive.get();
              }
    
              public void setColumnFive(String input) {
                   ColumnFive.set(input);
              }
    
              public String getColumnSix() {
                   return ColumnSix.get();
              }
    
              public void setColumnSix(String input) {
                   ColumnSix.set(input);
              }
    
              public String getColumnSeven() {
                   return ColumnSeven.get();
              }
    
              public void setColumnSeven(String input) {
                   ColumnSeven.set(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("");
              }
         }
    }
    ConstraintsTableViewModel.java
    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
                   .observableArrayList();
    
         public static TableView<Constraint> setupView() {
    
              TableColumn<Constraint, String> ColumnOneCol = new TableColumn<Constraint, String>("Example Exam1");
              ColumnOneCol.setMinWidth(95.0);
              ColumnOneCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnOne"));
    
              columnList.add(ColumnOneCol);
    
              TableColumn<Constraint, String> ColumnTwoCol = new TableColumn<Constraint, String>("Example 2");
              ColumnTwoCol.setMinWidth(55.0);
              ColumnTwoCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnTwo"));
              columnList.add(ColumnTwoCol);
    
              TableColumn<Constraint, String> ColumnThreeCol = new TableColumn<Constraint, String>("Example3");
              ColumnThreeCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnThree"));
              ColumnThreeCol.setMinWidth(70);
              columnList.add(ColumnThreeCol);
    
              TableColumn<Constraint, String> ColumnFourCol = new TableColumn<Constraint, String>("Example4");
              ColumnFourCol.setMinWidth(60.0);
              ColumnFourCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnFour"));
              columnList.add(ColumnFourCol);
    
              TableColumn<Constraint, String> ColumnFiveCol = new TableColumn<Constraint, String>("Example5");
              ColumnFiveCol.setMinWidth(60.0);
              ColumnFiveCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnFive"));
              columnList.add(ColumnFiveCol);
    
              TableColumn<Constraint, String> ColumnSixCol = new TableColumn<Constraint, String>("Example6");
              ColumnSixCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnSix"));
              ColumnSixCol.setMinWidth(55);
              columnList.add(ColumnSixCol);
    
              TableColumn<Constraint, String> ColumnSevenCol = new TableColumn<Constraint, String>("Exam7");
              ColumnSevenCol.setCellValueFactory(new PropertyValueFactory<Constraint, String>("ColumnSeven"));
              ColumnSevenCol.setMinWidth(55);
              columnList.add(ColumnSevenCol);
    
              table.getColumns().addAll(columnList);
    
              return table;
         }
    }
    SampleController.java
    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 {
        @FXML
         private TableView<Constraint> constraintsTableView;
    
         private Model cm = null;
        
        @Override
        public void initialize(URL url, ResourceBundle rb) {
            cm = Model.getInstance();
    
         constraintsTableView.setItems(cm.getConstraintsList());
         constraintsTableView.getColumns().addAll(ConstraintsTableViewModel.setupView().getColumns());
        }    
    }
  • 6. Re: TableView column headers do not line up with rows
    949137 Newbie
    Currently Being Moderated
    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!

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points