2012-02-28 10 views
2

セルテーブルの高さ(たとえば200ピクセル)が固定されている場合、行とヘッダーの高さを固定するにはどうすればよいですか?GWT cellTableの固定ヘッダーと行の高さ

私の場合、ヘッダーと行は、コンテンツが追加または削除されるたびに自動的にサイズ変更されます。

私はこのように私の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

[OK]を、私の質問はよく最初の場所で聞かれませんでした:(しかし、私は決意をしたことがあり私の問題。 私は意図したことは、テーブル自体の表示に影響を与える要素の数に変更を加えずにアイテムを置くことができる固定テーブル(周囲と)を持つことです。私はセルテーブルの固定された高さを設定しませんでした(それは動作しません)ので、定義された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; 
} 

出来上がり!

私はそれが誰かを助けることを願っています。