1

高さを 200px にしたい 2 つの DataGrid テーブルがありますが、CSS で高さをオーバーライドする何かがあります。現在、テーブルは 2 つの完全に異なるサイズで表示されています。

テーブル:

<table  dojoType="dojox.grid.DataGrid" id="dnToCountDiv" data-dojo-id="dnToCountDiv" columnReordering="true"
                            sortFields="['extension','totalcalls','totaloutboundcalls','internaloutboundcalls','localoutboundcalls','longdistanceoutboundcalls','internationaloutboundcalls','totalinboundcalls','inboundinternalcalls','inboundexternalcalls']"
                            rowWidth="100%"
                            noDataMessage="<span class='dojoxGridNoData'>No Calls to Show</span>"
                            class="statisticsTable">
                        <thead>
                            <tr>
                                <th field="extension" width="100%" >Extension</th>
                                <th field="totalcalls" width="100%" >Total</th>
                                <th field="totaloutboundcalls" width="100%" > Total Out</th>
                                <th field="internaloutboundcalls" width="100%" >Internal Out</th>
                                <th field="localoutboundcalls" width="100%" >Local Out</th>
                                <th field="longdistanceoutboundcalls" width="100%" >Long Dist Out</th>
                                <th field="internationaloutboundcalls" width="100%" >Internat. Out</th>
                                <th field="totalinboundcalls" width="100%" >Total In</th>
                                <th field="inboundinternalcalls" width="100%" >Internal In</th>
                                <th field="inboundexternalcalls" width="100%" >External In</th>
                            </tr>
                        </thead>
                    </table>

                    <!-- dn to call time table -->
                    <h3>Call Time Per Extension
                        <button  data-dojo-type="dijit.form.Button" id="call_time_help_button" data-dojo-props="iconClass: 'helpIconClass'">Column Key
                            <script type="dojo/method" data-dojo-event="onClick" >
                                alert("call Time help pressed");
                            </script>
                        </button></h3>
                    <table  dojoType="dojox.grid.DataGrid" id="dnToTimeDiv" data-dojo-id="dnToTimeDiv" columnReordering="true"
                            sortFields="['extension','totalcalls','totaloutboundcalls','internaloutboundcalls','localoutboundcalls','longdistanceoutboundcalls','internationaloutboundcalls','totalinboundcalls','inboundinternalcalls','inboundexternalcalls']"
                            rowWidth="100%"
                            noDataMessage="<span class='dojoxGridNoData'>No Calls to Show</span>"
                            class="statisticsTable">
                        <thead>
                            <tr>
                                <th field="extension" width="100%" >Extension</th>
                                <th field="totalcalls" width="100%" >Total</th>
                                <th field="totaloutboundcalls" width="100%" > Total Out</th>
                                <th field="internaloutboundcalls" width="100%" >Internal Out</th>
                                <th field="localoutboundcalls" width="100%" >Local Out</th>
                                <th field="longdistanceoutboundcalls" width="100%" >Long Dist Out</th>
                                <th field="internationaloutboundcalls" width="100%" >Internat. Out</th>
                                <th field="totalinboundcalls" width="100%" >Total In</th>
                                <th field="inboundinternalcalls" width="100%" >Internal In</th>
                                <th field="inboundexternalcalls" width="100%" >External In</th>
                            </tr>
                        </thead>
                    </table>

CSS:

.statisticsTable {
width: 800px;
height: 200px;
border-style:solid;
border-width:1px;
border-color:#C1C1C1;

}

Borders などが適切に追加されているため、CSS が表示されます。テーブルの1つでhtmlを検査すると、次のようになりますが、firebugを開くと。element.style が高さをオーバーライドしていることを認識しています。

ここに画像の説明を入力

どうすればこれを修正できますか?

ありがとう

4

1 に答える 1

11

属性は、styleを使用してのみオーバーライドできます!important。

.statisticsTable {
  height: 200px !important;
  /* ... */
}

!importantただし、（スタイルシート全体を悩ませる）によってのみオーバーライドできるため、絶対に避ける必要があります.インラインスタイルは、それ自体がスタイルである場合にのみオーバーライドでき、インラインスタイル!importantはCSSによってまったくオーバーライドできません. 最初にオーバーライドする必要があるスタイル属性を作成することを回避できる場合は、必ずそれを行う必要があります。!important!important!important!important

于 2012-11-17T18:11:17.617 に答える