修复了 GWT cellTable 中的 Header 和 Rows 高度答案

【问题标题】：Fixed Header and Rows height in GWT cellTable修复了 GWT cellTable 中的 Header 和 Rows 高度
【发布时间】：2015-08-19 18:18:29
【问题描述】：

当cellTable的高度固定例如200px时，如何使行的高度和标题固定？

在我的例子中，每次添加或删除内容时，标题和行都会自动调整大小。

我已经这样定义了我的 CSS：

  .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;
}

我也试过cellTable#setColumnWith()。

有什么想法吗？

[1]: http://i.stack.imgur.com/Vd2Hp.png ![在此处输入图片描述][1]

【问题讨论】：

标签： gwt celltable

【解决方案1】：

好的，可能是我的问题一开始就没有很好地提出:(但我已经解决了我的问题。我打算做的是有一个固定的桌子（有周围），我可以在其中放置我的物品，而不会改变影响桌子本身显示的元素数量。因此，为了获得这种行为，我没有在单元格表上设置固定高度（因为这不起作用），但我已将孔表放在具有定义的边框样式的垂直面板中并管理显示cellTable 及其 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;
}

表格 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;
}

瞧！

希望对大家有所帮助。

【讨论】：