2012-02-28 63 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; 
} 

瞧!

我希望它能幫助那裏的人。

相關問題