Question

如何增加GWT细胞表的细胞高度？

在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中进行哪些更改才能在所有浏览器中保持一致性（单元格高度）？

Answer 1

我认为问题可能是你的单元格的CSS样式有“overflow：hidden;”。

.cellTableCell {
  overflow: hidden;
  ...
}

拿走它，看看会发生什么。我认为单元格和行将扩展以适应内容。

cellTableRow的CSS还有另一种可能的修正方法。行样式应该被单元格样式覆盖，但GWT可能会做一些事情来弥补IE中的浏览器差异。为确保始终适用于TR中包含的TD，请按以下方式编写：

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

Answer 2

首先，你做了CSS重置吗？以下帖子指出我猜的同样问题。 Why is box sizing set to border-box for tables in Firefox?

问题可能是由于处理盒式模式的浏览器之间的差异造成的。有关详细信息，请阅读this post。

我会设置box-sizing属性。 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+ */
}

Answer 3

您可以使用

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

Answer 4

高度不是分配内容文本增加或减少的最佳解决方案。因此，有两种情况可以使您的上述示例如下所示。

A）使用纯CSS。 B）使用Javascript

解释A：在CSS中，无论我们使用的是DIV结构还是使用TABLE方法，我们还要依赖另外两件事。

A.1使用DIV：

如果我们使用div结构构建我的页面，我使用line-height垂直对齐文本和text-align以水平对齐文本。

A.2使用表格：如果我正在使用方法表，那么我想将文本居中在单元格的中间。当且仅当我使用文本vertical-align：middle和horizontal-align：center时，这个奇迹才会成立。注意：文本应写在标签中。

正文中的CSS为：

我爱真主我爱伊斯兰教

B：使用Javascript

在td中使用min-height，并使用vertical align和texl-align属性分别按x轴和y轴居中和居中。但是只有一个问题它会在IE6中创建一个bug报告，因为IE7，IE8不了解min-height。所以我们有IE9.js文件你用谷歌下载它。并将脚本放在html文档的头部。还要先放入最新的jquery文件，然后将IE9.js脚本放在它之后。

并且在css中享受min-height属性以及文本增长的距离，文本将自动位于表格单元格的中间。

如果您正在使用DIV，则它是相同的过程。

我希望这会让你有额外的东西。而且您不需要再次使用谷歌。如果你不理解它然后再问我。我将以jfiddle为例用不同的语气回复你。谢谢亲爱的。：）

Answer 5

我们有时会遇到IE打破布局的问题，因为页面在一切就绪之前呈现。尝试为DOM中的某个元素分配一个虚拟CSS类会改变任何内容。

如果是，则以下代码可能对您有所帮助。它只是在body元素上设置一些随机类并重置它以强制重新呈现页面：

/**
 * 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;
                                              }-*/;

Answer 6

使用此

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

Answer 7

对我有用：）

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

Answer 8

扩展AbstractCellTableBuilder，然后提到TableRow的高度属性

如何增加GWT celltable的单元格高度：IE问题？

8 个答案: