4

下手な英語で申し訳ありませんが、私の言いたいことを理解していただければ幸いです...

テーブル ヘッドとは無関係にテーブル ボディのスクロールをサポートする HTML テーブルを実装しようとしています。

次の質問がとても 役に立ちました。「thead」から独立してテーブルの「tbody」をスクロールするにはどうすればよいですか?

次のコードをテストしました。Chrome (22)、Firefox (16)、Opera (12) で問題なく動作します。

HTML :

<table>
  <thead>
   <tr>
    <th>Title1</th>
    <th>Title2</th>
    <!-- ... -->
   </tr>
  </thead>
  <tbody>
   <tr>
     <td>...</td>
     <td>...</td>
     <!-- ... -->
   </tr>
   <!-- ... -->
  </tbody>
</table>

CSS :

thead, tbody {
    display: block;
}

tbody {
    height:500px;
    overflow-y:auto;
    overflow-x:hidden;
}

thead {
    line-height: 20px;
}

したがって、IE 9 を除く主要なブラウザーで動作しますが、IE ではいくつかの問題があります。

  • tbody の高さは定義されていません (そのため、スクロールバーはありません)
  • それぞれの高さは 500px (他のブラウザーでの tbody の高さ) です。

次の 2 つの例には、まったく同じ問題があります: http://jsfiddle.net/nyCKE/2/、http://www.imaputz.com/cssStuff/bigFourVersion.html

次の質問 (および回答) を見ましたが、役に立ちません: IE9 + css : problem with fixed header table

したがって、バグは IE に起因すると確信していますが、HTML 構造を変更せずに修正する方法がわかりません。

誰かに何か考えがありますか？

4

2 に答える 2

6

私はそれを少し修正しようとしました。それがいくつかのアイデアを与えることを願っています

HTML

<div class="wrap">
    <div class="inner">
        <table>
            <thead><tr>
                <th><p>Problem</p></th>
                <th><p>Solution</p></th>
        </tr>               
            </thead>            
            <tbody>              
            </tbody>
        </table>
    </div>
</div>​

CSS

p {margin:0 0 1em}
table p {margin :0}
.wrap {
    margin:50px 0 0 2%;
    float:left;
    position:relative;
    height:200px;
    overflow:hidden;
    padding:25px 0 0;
    border:1px solid #000;
width:150px
}
.inner {
    padding:0 ; 
    height:200px;
    overflow:auto;
}    
table {  margin:0 0 0 -1px; border-collapse:collapse; width:130px}
td {
    padding:5px;
    border:1px solid #000;
    text-align:center;    
}
thead th {
    font-weight:bold;
    text-align:center;
    border:1px solid #000;
    padding:0 ;    
    color:#000;
}
thead th {border:none;}
thead tr p {  position:absolute;   top:0;    }
.last { padding-right:15px!important; }​

デモhttp://jsfiddle.net/nyCKE/272/

于 2012-10-11T09:58:10.117 に答える
0

これは、ie9 で固定ヘッダーを使用してテーブルをスクロールできる短い回答です。

テーブルの周りに条件付き div を追加する

<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->
<table>
...
<!--[if lte IE 9]>
</div>
<!--<![endif]-->

ie9 に次のスタイルを追加します。

    .old_ie_wrapper {
        height: 500px;
        overflow: auto;
    }

        .old_ie_wrapper tbody {
            height: auto;
        }

        .old_ie_wrapper thead tr {
            position: absolute;
        }

        .old_ie_wrapper tbody tr:first-child {
            height: 67px;
            vertical-align: bottom;
        }

テーブルに基づいて、高さとおそらく他のプロパティを調整する必要があります。

于 2015-03-11T15:27:02.720 に答える