2012-02-28 65 views
2

当cellTable的高度固定(例如200px)时,如何固定行和标头的高度?GWT单元格中的固定标头和行高度表

在我的情况下,每次添加或删除内容时,标题和行会自动重新调整大小。

我定义我的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()

有什么想法?

enter image description here

[1]:http://i.stack.imgur.com/Vd2Hp.png [在这里输入的形象描述] [1]

回答

2

好了,可能是我的问题是不是在首位以及问:(但是我有决心我的问题 我打算做的是有一个固定的表(与周围),我可以放置我的项目,而不会影响显示表本身的元素数量的变化。所以,要有这种行为,我没有在单元格表上设置固定的高度(因为这不起作用),但是我把孔表放在一个具有定义的boder风格的垂直面板中,并用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; 
} 

瞧!

我希望它能帮助那里的人。

相关问题