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

Question

如何增加 GWT celltable 的单元格高度？

在 mozilla firefox 单元格高度正确（根据内容），但在 Internet Explorer 的情况下，部分内容无法正确显示

看图片在此处输入图像描述

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

score 1 · Accepted Answer

我认为问题可能是您的单元格 CSS 样式具有“溢出：隐藏；”。

.cellTableCell {
  overflow: hidden;
  ...
}

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

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

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

score 0 · Accepted Answer

0

您可以使用

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

于 2013-03-04T04:52:24.823 回答

score 0 · Accepted Answer

首先，您是否进行了 CSS 重置？以下帖子指的是我猜同样的问题。为什么 Firefox 中表格的框大小设置为边框框？

问题可能是由于浏览器处理盒子模型的方式不同造成的。阅读这篇文章了解更多信息。

我会设置 box-sizing 属性。IE 使用边框框，其他浏览器使用内容框模型。您可以定义哪一个应与以下 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+ */
}

score 0 · Accepted Answer

0

用这个

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

于 2013-07-22T08:07:46.843 回答

score 0 · Accepted Answer

0

这个对我有用：）

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

于 2013-07-22T12:22:28.477 回答

score 0 · Accepted Answer

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

如果是这样，以下代码可能会对您有所帮助。它只是在 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;
                                              }-*/;

score -1 · Accepted Answer

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

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

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

A.1 使用 DIV：

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

A.2 使用表格：如果我使用的是方法表格，那么我想将文本放在单元格中间。当且仅当我使用文本垂直对齐：中间和水平对齐：中心时，这个奇迹才会成立。注意：文本应该写在 tag 中。

正文中的 CSS 为：

我爱安拉我爱伊斯兰教

B：使用Javascript

在 td 中使用 min-height 并使用 vertical align 和 texl-align 属性分别按 x 轴和 y 轴居中和居中文本。但是只有一个问题它会在 IE6、7 中产生 bug 报告。因为 IE7、IE8 不理解 min-height。所以我们有 IE9.js 文件，您可以使用谷歌下载它。并将脚本放在html文档的头部。同样先放最新的jquery文件，再放IE9.js脚本。

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

如果您使用的是 DIV，那么它是相同的过程。

我希望这会让你有所收获。而且您无需再次使用 google。如果您不明白，请再问我一次。我会用 jfiddle 的例子用不同的语气回复你。谢谢你亲爱的。:)

score -1 · Accepted Answer

-1

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

于 2014-11-13T18:43:12.973 回答

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

8 回答 8

Related

Reference