IEでYUIデータテーブルが正しく表示されないのはなぜですか？

私は、約90行のデータが入ったYUIデータテーブルを用意しています。私は、ユーザーが適切と思うように列を並べ、ページを印刷したいと考えています。IEでYUIデータテーブルが正しく表示されないのはなぜですか？

私はすべてのYUIの設定をしており、うまくいきます。ただし、印刷すると、すべての色が削除され、テーブルレイアウトで再生されます。

が、私はこのコメントを追加しました：それは今のFirefox 3に細かい印刷し

[ 
H1 { 
    text-align: center 
} 

.hideOnPrint { visibility: hidden; display: none; } 

.yui-skin-sam .yui-dt table { 
    font-size:10px; 
    border:1px solid #808080; 
    border-collapse:collapse;border-spacing:1; 
} 
.yui-skin-sam .yui-dt thead { 
    text-align:center; 
    font-family:"Lucida Grande","Verdana",sans-serif; 
    font-size:12px; 
    font-weight:bold; 
    font-style:italic; 
    display: table-header-group; 
} 

.yui-skin-sam tr { 
    border:1px solid #888888; 
} 
]

を、しかし、それはIE7でうまく動作しません。

Firefox 3は、約1.5ページの長さのテーブルを取り、1つのページで2/3、別のページで1/3にカットします。両方のページにタイトルと見出しがあり、適切に書式設定されています。

IE7では、データを半分にカットし、両方のページのデータの最初の半分を複製します。

これがYUIマークアップのためか、IEに特別な設定が必要なのか、それとも何が必要なのかわかりません。

このページです：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 


    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Intercom List</title> 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css" /> 

<style type="text/css"> 
/*margin and padding on body element 
    can introduce errors in determining 
    element position and are not recommended; 
    we turn them off as a foundation for YUI 
    CSS treatments. */ 
body { 
    margin:0; 
    padding:0; 
} 

H2 { 
    font-size: 10px; 
    font-style: italic; 
} 


/* basic skin styles */ 
.yui-skin-sam .yui-dt table { 
    filter: alpha(opacity=100);margin:0;padding:2,3,2,3;text-align:center;font-family:"Lucida Grande","Verdana",sans-serif;font-size:11px;border-collapse:separate;*border-collapse:collapse;border-spacing:0;} 
.yui-skin-sam .yui-dt thead {border-spacing:0;border:none;border-right:0px solid #CBCBCB;} /* for safari bug */ 
.yui-skin-sam .yui-dt caption {padding-bottom:0em;text-align:left;} 

.yui-skin-sam tr.yui-dt-even { background-color:#DFD2C2; } /* white */ 
.yui-skin-sam tr.yui-dt-odd { background-color:#F3ECE4; } /* light blue */ 
.yui-skin-sam tr.yui-dt-even td.yui-dt-asc, 
.yui-skin-sam tr.yui-dt-even td.yui-dt-desc { background-color:#D3C7B8; } /* light blue sorted EDF5FF */ 
.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc, 
.yui-skin-sam tr.yui-dt-odd td.yui-dt-desc { background-color:#E0D9D2; } /* dark blue sorted DBEAFF */ 

</style> 

<STYLE type="text/css" media="print"> 
H1 { 
    text-align: center 
} 

.hideOnPrint { visibility: hidden; display: none; } 

.yui-skin-sam .yui-dt table { 
    font-size:10px; 
    border:1px solid #808080; 
    border-collapse:collapse;border-spacing:1; 
} 
.yui-skin-sam .yui-dt thead { 
    text-align:center; 
    font-family:"Lucida Grande","Verdana",sans-serif; 
    font-size:12px; 
    font-weight:bold; 
    font-style:italic; 
    display: table-header-group; 
} 

.yui-skin-sam tr { 
    border:1px solid #888888; 
} 
</STYLE> 



<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script> 


<!--begin custom header content for this example--> 
<style type="text/css"> 
/* custom styles for this example */ 
.yui-skin-sam .yui-dt-liner { white-space:nowrap; } 
</style> 

<!--end custom header content for this example--> 

</head> 

<body class="yui-skin-sam"> 

<h1>INTERCOM List</h1> 

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> 

<div class="hideOnPrint"> <h2>Order List by clicking on the column header, resort the list by clicking and dragging the column header, resize the column by clicking on the devider line and dragging left or right.</h2></div> 

<div id="intercomList"></div> 

<script type="text/javascript" src="employee data.js"></script> 

<script type="text/javascript"> 

YAHOO.util.Event.addListener(window, "load", function() { 
    YAHOO.example.Basic = function() { 

     var sortLastName = function(a, b, desc) { 
      // Deal with empty values 
      if(!YAHOO.lang.isValue(a)) { 
       return (!YAHOO.lang.isValue(b)) ? 0 : 1; 
      } 
      else if(!YAHOO.lang.isValue(b)) { 
       return -1; 
      } 

      // First compare by lastname 
      var comp = YAHOO.util.Sort.compare; 
      var compState = comp(a.getData("lastname"), b.getData("lastname"), desc); 

      // If states are equal, then compare by firstname 
      return (compState !== 0) ? compState : comp(a.getData("firstname"), b.getData("firstname"), desc); 
     }; 


     var sortFirstName = function(a, b, desc) { 
      // Deal with empty values 
      if(!YAHOO.lang.isValue(a)) { 
       return (!YAHOO.lang.isValue(b)) ? 0 : 1; 
      } 
      else if(!YAHOO.lang.isValue(b)) { 
       return -1; 
      } 

      // First compare by firstname 
      var comp = YAHOO.util.Sort.compare; 
      var compState = comp(a.getData("firstname"), b.getData("firstname"), desc); 

      // If states are equal, then compare by lastname 
      return (compState !== 0) ? compState : comp(a.getData("lastname"), b.getData("lastname"), desc); 
     }; 


     var sortBuildingName = function(a, b, desc) { 
      // Deal with empty values 
      if(!YAHOO.lang.isValue(a)) { 
       return (!YAHOO.lang.isValue(b)) ? 0 : 1; 
      } 
      else if(!YAHOO.lang.isValue(b)) { 
       return -1; 
      } 

      // First compare by firstname 
      var comp = YAHOO.util.Sort.compare; 
      var compState = comp(a.getData("building"), b.getData("building"), desc); 

      var compState2 = (compState !== 0) ? compState : comp(a.getData("firstname"), b.getData("firstname"), desc); 

      // If states are equal, then compare by lastname 
      return (compState2 !== 0) ? compState2 : comp(a.getData("lastname"), b.getData("lastname"), desc); 
     }; 

     var sortCompanyName = function(a, b, desc) { 
      // Deal with empty values 
      if(!YAHOO.lang.isValue(a)) { 
       return (!YAHOO.lang.isValue(b)) ? 0 : 1; 
      } 
      else if(!YAHOO.lang.isValue(b)) { 
       return -1; 
      } 
      // First compare by firstname 
      var comp = YAHOO.util.Sort.compare; 
      var compState = comp(a.getData("company"), b.getData("company"), desc); 

      var compState2 = (compState !== 0) ? compState : comp(a.getData("firstname"), b.getData("firstname"), desc); 

      // If states are equal, then compare by lastname 
      return (compState2 !== 0) ? compState2 : comp(a.getData("lastname"), b.getData("lastname"), desc); 
     }; 



     var myColumnDefs = [ 
      {key:"extension", width: 65, sortable:true, resizeable:true}, 
      {key:"firstname", width: 100, sortOptions:{sortFunction:sortFirstName}, sortable:true, resizeable:true}, 
      {key:"lastname", width: 100, sortOptions:{sortFunction:sortLastName}, sortable:true, resizeable:true}, 
      {key:"company", width: 100, sortOptions:{sortFunction:sortCompanyName}, sortable:true, resizeable:true}, 
      {key:"building", width: 100, sortOptions:{sortFunction:sortBuildingName}, sortable:true, resizeable:true} 
     ]; 

     var myDataSource = new YAHOO.util.DataSource(YAHOO.Data.employees); 
     myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
     myDataSource.responseSchema = { 
      fields: ["extension","firstname","lastname","company","building"] 
     }; 

     var myDataTable = new YAHOO.widget.DataTable("intercomList", 
       myColumnDefs, myDataSource, {draggableColumns:true}); 

     return { 
      oDS: myDataSource, 
      oDT: myDataTable 
     }; 
    }(); 
}); 
</script> 

<!--END SOURCE CODE FOR EXAMPLE =============================== --> 

</body> 
</html>

これは、従業員データファイルです：

YAHOO.Data = { 
    employees: [ 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}, 
     {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"} 
    ] 
}

出典

2009-03-20 Greg R

あなたはマークアップの例を投稿することができますか？この問題を呈するサンプルはほんのわずかですか？ – Welbog

私は全体のファイル.. 1秒を投稿することができます –

theres 2つのファイル。 –

あなたが特定の印刷スタイルシートを指定したことがありますか？

ところで

、度Probより良いstackoverflowのユーザーがローカルで再作成することを期待するのではなく、コードの作業バージョンにリンクします。

出典

2009-03-20 18:28:03 Paul

私は自分のマシン上でローカルに動作している作業コピーにリンクできないことを理解しています。私はちょうどリンクできるウェブボックスを持っていません...

IEでYUIデータテーブルが正しく表示されないのはなぜですか？

答えて