1

これは質問ではなく、解決策ですが、なぜこれが起こっているのか説明できる人がいるかもしれません. div (white-space=nowrap の行ラッパーと display=inline-block のセル) を使用してテーブルを作成しました。ヘッダー行とテーブルの残りの部分は、異なる ID を持つ 2 つの異なるコンテナー div にありました。

コードは次のようなものです。

<div id="main_container">
  <div id="header_wrapper">
    <div id="header_row">
      <div class="column_cell1">...</div> 
      <div class="column_cell2">...</div>
      ...other cells...
    </div>
  </div> --closed the header container
  <div id="table_content_wrapper">
    <div id="table_row">
      <div class="column_cell1">...</div> 
      <div class="column_cell2">...</div>
      ...other cells identical classes as the header...
    </div>
     ...several other table rows...
  </div> --closed the table container
</div> --closed the main container

CSS は次のようになりました。

#header_wrapper {
position:absolute;
top:100px;
height:100px;
width:100%;
}

#table_content_wrapper {
position:absolute;
top:200px;
bottom:0;
width:100%;
}

#header_row {
height:100%;
white-space:nowrap;
}

#column_row {
height:100px;
white-space:nowrap;
}

.column_cellN (all equal) {
height:100%;
width:10%;
display:inline-block;
white-space:normal;
}

何をしても、ヘッダー セルと表の行セルがずれていました。それらを同じように見せるための唯一の方法は (無数の試行錯誤の後)、ヘッダー行ラッパーとテーブル行ラッパーに同じ div ID を割り当てることでした。

最も奇妙なことは、クロムの開発者ツールが、ヘッダーとテーブルのさまざまなセルがピクセル単位で同じ幅であると報告したことですが、実際にはブラウザーで異なる方法でレンダリングされました。IE でも同じ動作です。

なぜこれが起こっているのか誰かが知っていますか？

4

1 に答える 1

0

私のために働きます。

http://jsfiddle.net/UMf3k/2/

CSS を修正します。#header_wrapper {position:relative;}

于 2013-06-27T20:20:56.077 に答える