Question

How can i make the height of the row and the header fixed when the height of the cellTable is fixed e.g 200px?

In my case, the header and the row are automatically re-sized every time a content is added or removed.

I’ve defined my CSS like this:

  .cellTableHeader {
  border-bottom: 2px solid #6f7277;
  padding: 3px 15px;
  text-align: left;
  color: #4b4a4a;
  text-shadow: #ddf 1px 1px 0;
  overflow: hidden;
  height: 25px;
}

.cellTableCell {
    padding: 4px;
    overflow: hidden;
    font-size: 10px;
    font-family: ARIAL;
    height: 25px;
}

.cellTableEvenRow {
  background: #ffffff;
  height: 25px;
}

.cellTableOddRow {
  background: #f3f7fb;
   height: 25px;
}

I’ve also tried the cellTable#setColumnWith().

Any idea ?

[1]: https://i.stack.imgur.com/Vd2Hp.png ![enter image description here][1]

Answer 1

Ok, may be my question wasn’t well asked at the first place 🙁 but I’ve resolve my problem.
What i intended to do is to have a fixed table( with surrounding) where i can place my items without having the change on the numbers of the elements effecting the display of the table itself. So, to have that behavior, i didn’t set a fixed height on the cell table (since that doesn’t work) but I’ve put the hole table in a vertical panel with defined boder-style and manage the display of the cellTable with its css.

VerticalPanel contentPanelVP = getContentPanel();
contentPanelVP.add(this.trainerConfigurationTable);

    /**
     * Gets the panel that represents the surroundings 
     * 
     * @return configured vertical panel
     */
    private VerticalPanel getContentPanel() {
        VerticalPanel tableContentVP = new VerticalPanel();
        tableContentVP.setVerticalAlignment(HasVerticalAlignment.ALIGN_TOP);
        tableContentVP.setStyleName(CSS_TRAINING_BOX_CONTENT);
        tableContentVP.setWidth(CONTENT_PANEL_WIDTH);
        tableContentVP.setHeight(CONTENT_PANEL_HEIGHT);
        return tableContentVP;
    }

CSS

.tableContentVP{
    border-width: 1px;
    border-style: solid;
    border-color: grey;
    padding: 0px;
    background-color: white;
}

Table CSS

@def selectionBorderWidth 2px;
.cellTableWidget { 
}

.cellTableFirstColumn {
    height: 25px;
}

.cellTableLastColumn {

}

.cellTableFooter {
}

.cellTableHeader {
    padding: 0px;
    text-align: center;
    font-size: 10px;
    font-family: ARIAL;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .7);
    background-image: none;
    background-color: black;
    height: 25px;
    vertical-align: middle;
}

.cellTableCell {
    padding: 4px;
    overflow: hidden;
    font-size: 10px;
    font-family: ARIAL;
    text-align: center;
}


.cellTableSortableHeader {
    cursor: pointer;
    cursor: hand;
}


.cellTableEvenRow {
    background: #ffffff;
    height: 25px;
    cursor: pointer;
    cursor: hand;
}

.cellTableEvenRowCell {
    border: selectionBorderWidth solid #ffffff;
}

.cellTableOddRow {
    background: #f3f7fb;
    height: 25px;
    cursor: pointer;
    cursor: hand;
}

.cellTableOddRowCell {
    border: selectionBorderWidth solid #f3f7fb;
}

.cellTableHoveredRow {
    background: #eee;
}

.cellTableHoveredRowCell {
    border: selectionBorderWidth solid #eee;
}

.cellTableKeyboardSelectedRow {
    background: #ffc;
}

.cellTableKeyboardSelectedRowCell {
    border: selectionBorderWidth solid #ffc;
}

.cellTableSelectedRow {
    background: #628cd5;
    color: white;
    height: auto;
    overflow: auto;
}

.cellTableSelectedRowCell {
    border: selectionBorderWidth solid #628cd5;
}

/**
 * The keyboard selected cell is visible over selection.
 */
.cellTableKeyboardSelectedCell {
    border: selectionBorderWidth solid #d7dde8;
}

.cellTableLoading {
    margin: 30px;
}

Voila !

I hope, it will help someone out there.