如何增加GWT celltable的細胞高度：IE問題？

如何增加GWT細胞的細胞高度？如何增加GWT celltable的細胞高度：IE問題？

在Mozilla Firefox細胞高度合適（按內容），但在Internet Explorer的情況下，內容的某些部分不能正常顯示

看到圖像 enter image description here

我Celltable.css如下：

@def selectionBorderWidth 0px; 
.cellTableWidget { 
    border: 1px solid red; 
} 

.cellTableFirstColumn { 

} 

.cellTableLastColumn { 

} 

.cellTableFooter { 
    text-align: left; 
    color: #4b4a4a; 
    overflow: hidden; 
} 

.cellTableHeader { /** COLUMN HEADR TEXT */ 
    text-align: left; 
    color: #4b4a4a; 
    overflow: hidden; 
    background-color: #E1E1E1; 
    font-family: arial, Helvetica, sans-serif; 
    font-size: 8pt; 
    font-weight: bold; 
    padding-left: 10px; 
    height: 20px; 
    border-bottom: #e6e6e6 1px solid; 
    border-left: #a6a6af 0.5px solid; 
    border-right: #e6e6e6 1px solid; 
    border-top: #a6a6af 0.5px solid; 
} 

.cellTableCell { 
    overflow: hidden; 
    padding-left: 10px; 
    height: 20px; 
    font-family: Arial; 
    font-size: 11px; 
    font-weight: normal; 
    border-bottom: #e6e6e6 1px solid; 
    border-left: #a6a6af 0.5px solid; 
    border-right: #e6e6e6 1px solid; 
    border-top: #a6a6af 0.5px solid; 
} 

.cellTableFirstColumnFooter { 

} 

.cellTableFirstColumnHeader { 

} 

.cellTableLastColumnFooter { 

} 

.cellTableLastColumnHeader { 

} 

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

.cellTableSortableHeader:hover { 
    color: #6c6b6b; 
} 

.cellTableSortedHeaderAscending { 

} 

.cellTableSortedHeaderDescending { 

} 

.cellTableEvenRow { 
    background: #ffffff; 
} 

.cellTableEvenRowCell { 

} 

.cellTableOddRow { 
    background: #f8f8f8; 
} 

.cellTableOddRowCell { 

} 

.cellTableHoveredRow { /** background: #eee;*/ 

} 

.cellTableHoveredRowCell { 
    /** border: selectionBorderWidth solid #eee; */ 

} 

.cellTableKeyboardSelectedRow { 
    background: #ffc; 
} 

.cellTableKeyboardSelectedRowCell { 

} 

.cellTableSelectedRow { 
    background-image: url("images/row_Highlight.jpg"); 
    color : black; 
    height: auto; 
    overflow: auto; 
} 

.cellTableSelectedRowCell { 

} 

/** 
* The keyboard selected cell is visible over selection. 
*/ 
.cellTableKeyboardSelectedCell { 

} 


@sprite .cellTableLoading { 
    gwt-image: 'cellTableLoading'; 
    /*margin: 20px; 
*/}

爲了在所有瀏覽器中保持一致性（單元格高度），我需要在CSS中進行哪些更改？

來源

2013-02-14 StackOverFlow

您是否必須堅持'CellTable'？可能'FlexTable'會更簡單，因爲你可以用gwt而不是用css格式化它。 – qben 2013-02-17 15:15:26

@qben是的，我必須堅持到Celltable。我知道靈活性很容易。 – StackOverFlow 2013-02-17 15:21:52

等待解決方案，這將解決我的問題 – StackOverFlow 2013-02-18 10:03:23

它爲我工作:)

/** Cell height */ 
.mainCellTable tbody tr td{ 
    height: auto; 
}

來源

2013-07-22 12:22:28 StackOverFlow

首先，你做了一個CSS重置？以下帖子提到了我猜測的同樣的問題。 Why is box sizing set to border-box for tables in Firefox?

這個問題可能是由於瀏覽器在處理box-model的方式上的差異造成的。閱讀this post瞭解更多信息。

我會設置框大小屬性。 IE使用邊框，每隔一個瀏覽器使用content-box-modell。您可以定義，應該使用哪一個下面的CSS規則中使用：

table { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

或

table { 
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: content-box; /* Firefox, other Gecko */ 
    box-sizing: content-box;   /* Opera/IE 8+ */ 
}

來源

2013-02-18 07:23:14 Sam

你做CSS重置？ - > NO。在哪裏添加箱子尺寸：邊框;在我的celltable.css？我在.cellTableCell中添加了這個，沒用。請澄清這一點 – StackOverFlow 2013-02-18 10:02:17

是的，CSS重置。表格單元格應該是正確的。你有鏈接，我可以檢查你的HTML和CSS？ – Sam 2013-02-18 10:33:58

不，我沒有鏈接。 – StackOverFlow 2013-02-21 11:10:19

您可以使用

.cellTableKeyboardSelectedRow { 
    background: #ffc; 
    height:30px !important 
}

來源

2013-03-04 04:52:24 Feroz

高度不分配，其中最好的解決辦法內容文本要麼增加要麼減少。所以有兩種情況可以使你的上面的例子如下。 A）使用純CSS。 B）使用Javascript

說明A：在CSS中，無論我們使用DIV結構還是使用TABLE方法，我們都依賴於另外2件事情。

A.1使用DIV：

如果我們使用DIV結構建設我的頁面，我使用的line-height垂直對齊文本和文本對齊水平對齊文本。

A.2使用表：如果我使用方法表，那麼我想將文本居中放置在單元格中間。這個奇蹟將保持真實，當且僅當我使用文字垂直對齊：中間和水平對齊：中心。注意：文字應該寫在標籤上。

身體CSS爲：

我愛真主我愛伊斯蘭教

B：使用JavaScript

使用最小高度在TD和使用垂直對齊和廈門太古發動機 - 對齊屬性以分別按x軸和y軸居中和居中文本。但是隻有一個問題會在IE6,7中創建一個錯誤報告，因爲IE7，IE8不理解最小高度。所以我們有你使用谷歌下載它的IE9.js文件。並把腳本放在html文檔的頭部。首先放置最新的jquery文件，然後放入IE9.js腳本。

並在CSS享受最小高度屬性和文本增長多少，文本將自動在表格單元格的中間。

如果您使用DIV，那麼它是相同的過程。

我希望這會讓你有些額外的東西。而且你不需要再次使用谷歌。如果你不明白，那麼再問我一次。我會用不同的語氣以jfiddle爲例來回答你。謝謝親愛的。 :)

來源

2013-03-16 18:32:54 Hassaan

我認爲問題可能是您的單元格的CSS樣式有「overflow：hidden;」。

.cellTableCell { 
    overflow: hidden; 
    ... 
}

拿走它，看看會發生什麼。我認爲單元格和行將擴展以適應內容。

對於cellTableRow的CSS還有另一種可能的更正。行樣式應該被單元格樣式覆蓋，但是GWT可能會做些事情來彌補IE中的瀏覽器差異。爲了確保它始終適用中所包含TR的TDS，寫這樣的：

.cellTableRow, 
.cellTableRow td { 
    overflow: auto; 
    ... 
}

來源

2013-04-10 23:36:14 Deborah

我們有時不得不與IE打破了佈局問題，因爲頁面呈現前一切準備就緒。嘗試是否將一個虛擬CSS類分配給DOM中的某個元素會改變任何內容。

如果有，下面的代碼可能會對您有所幫助。它只是設置在主體元素一些隨機類，並重置它迫使頁面的重新渲染：

/** 
* Force Internet Explorer 8 to render the page again without a page refresh. after the given delay of milliseconds. This 
* method only works for Internet Explorer 8. 
* 
* @param delayInMillis delay in milliseconds 
*/ 
public void forceIe8ToReRender(final int delayInMillis) { 
    // call timer to force ie8 to re-render page without page refresh 
    final Timer t = new Timer() { 

     @Override 
     public void run() { 
      doForceBrowserToReRender(); 
      // timer should only run once 
      this.cancel(); 
     } 
    }; 
    t.schedule(delayInMillis); 
} 

/** 
* Force Browser to render the page again without a page refresh 
*/ 
private native void doForceBrowserToReRender()/*-{ 
               var doc = $doc; 
               var originalClassName = doc.body.className; 
               doc.body.className = "foobar"; 
               doc.body.className = originalClassName; 
               }-*/;

來源

2013-04-22 13:14:59 koljaTM

使用本

.cellTableCell { min-height : 20px ; ..... }

來源

2013-07-22 08:07:46

-1

擴展AbstractCellTableBuilder，然後提到TableRow的高度屬性

來源

2014-11-13 18:43:12 Mahul

這似乎不是一個相關的答案 – 2014-11-13 18:57:17

如何增加GWT celltable的細胞高度：IE問題？

回答

相關問題