8

GWTセルテーブルのセルの高さを増やす方法は？

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でどのような変更を行う必要がありますか？

4

8 に答える 8

1

問題は、セルのCSSスタイルに「オーバーフロー：非表示」があることだと思います。

.cellTableCell {
  overflow: hidden;
  ...
}

それを取り除いて、何が起こるかを見てください。セルと行はコンテンツに合わせて拡張されると思います。

cellTableRowのCSSには別の可能な修正があります。行のスタイルはセルのスタイルで上書きする必要がありますが、GWTは、IEでのブラウザーの違いを補うために、内部で何かを行っている可能性があります。TRに含まれるTDに常に適用されるようにするには、次のように記述します。

.cellTableRow,
.cellTableRow td {
  overflow: auto;
  ...
}
于 2013-04-10T23:36:14.940 に答える
0

まず、CSSをリセットしますか？次の投稿は私が推測する同じ問題を参照しています。 Firefoxのテーブルのボックスサイズがborder-boxに設定されているのはなぜですか？

この問題は、ボックスモデルの処理方法のブラウザ間の違いが原因である可能性があります。詳細については、この投稿をお読みください。

ボックスサイズ設定プロパティを設定します。IEはborder-boxを使用し、他のすべてのブラウザーは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-18T07:23:14.643 に答える
0

使用できます

.cellTableKeyboardSelectedRow {
    background: #ffc;
    height:30px !important
}
于 2013-03-04T04:52:24.823 に答える
0

すべての準備が整う前にページがレンダリングされるため、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;
                                              }-*/;
于 2013-04-22T13:14:59.053 に答える
0

これを使って

.cellTableCell { min-height : 20px ; ..... }
于 2013-07-22T08:07:46.843 に答える
0

わたしにはできる ：）

/** Cell height */
.mainCellTable tbody tr td{
    height: auto;
}
于 2013-07-22T12:22:28.477 に答える
-1

高さは、コンテンツテキストを増減する場所を割り当てるのに最適なソリューションではありません。したがって、上記の例を次のように作成する2つのケースがあります。

A）純粋なCSSを使用します。B）Javascriptを使用する

説明A：CSSでは、DIV構造を使用しているか、TABLEメソッドを使用しているかにかかわらず、さらに2つのことに依存しています。

A.1 DIVの使用：

ページを構築するdiv構造を使用していて、line-heightを使用してテキストを垂直方向に配置し、text-alignを使用してテキストを水平方向に配置している場合。

A.2テーブルの使用：メソッドテーブルを使用している場合、テキストをセルの中央に配置したいと思います。この奇跡は、テキストvertical-align：middleとhorizo​​ntal-align：centerを使用する場合にのみ当てはまります。注：テキストはタグで記述する必要があります。

本体のCSS：

私はアッラーを愛しています私はイスラム教を愛しています

B：Javascriptを使用する

tdでmin-heightを使用し、verticalalignプロパティとtexl-alignプロパティを使用して、テキストをそれぞれx軸とy軸で中央揃えと中央揃えにします。ただし、IE6、7でバグレポートが作成される問題は1つだけです。これは、IE7、IE8が最小の高さを理解していないためです。つまり、Googleを使用してダウンロードしたIE9.jsファイルがあります。スクリプトをhtmlドキュメントの先頭に配置します。また、最新のjqueryファイルを最初に配置し、次にIE9.jsスクリプトを配置します。

cssでは、min-heightプロパティを使用し、テキストが大きくなる限り、テキストは自動的にテーブルセルの中央に配置されます。

DIVを使用している場合は、同じプロセスです。

これがあなたに何か特別なものになることを願っています。そして、あなたはもう一度グーグルを使う必要はありません。あなたがそれを理解していないなら、それから私にもう一度尋ねてください。jfiddleの例で別のトーンで返信します。ありがとうございます。:)

于 2013-03-16T18:32:54.540 に答える
-1

AbstractCellTableBuilderを拡張してから、TableRowの高さ属性に言及します

于 2014-11-13T18:43:12.973 に答える