10

高さと幅を完全に拡張できるテーブルのデザインを使用しています。

テーブルはうまく機能しますが、スクロールバーの幅が原因で、テーブルの列の上に列名の位置を調整または合わせることができません。スクロールバーが表示されている場合 (常に表示されている必要があります)、テーブルの行がずれており、列の名前が正しく表示されません。

考えを教えてください。

スクロールバーの z-index または変位動作を回避する方法を変更する方法はありますか?

ここに jsFiddle があります:サンプルはこちら

HTML: 

     <div id="tablecontainer">
        <div id="topbar">
            <div class="colname cellwidth1">ABC</div>
            <div class="colname cellwidth2">ABC</div>
            <div class="colname cellwidth3">ABC</div>
            <div class="colname cellwidth4">ABC</div>
        </div>
        <div class="breakline"></div>
        <div id="expandtable">
            <div class="divrow">
                <div class="divcell cellwidth1">&nbsp;</div>
                <div class="divcell cellwidth2">&nbsp;</div>
                <div class="divcell cellwidth3">&nbsp;</div>
                <div class="divcell cellwidth4">&nbsp;</div>
            </div>
            <div class="divrow">
                <div class="divcell cellwidth1">&nbsp;</div>
                <div class="divcell cellwidth2">&nbsp;</div>
                <div class="divcell cellwidth3">&nbsp;</div>
                <div class="divcell cellwidth4">&nbsp;</div>
            </div>          
        </div>
        <div class="breakline"></div>
        <div id="topbar">
            <div class="colname cellwidth1">ABC</div>
            <div class="colname cellwidth2">ABC</div>
            <div class="colname cellwidth3">ABC</div>
            <div class="colname cellwidth4">ABC</div>
        </div>
    </div>

CSS:

html, body, #expandtable, #tablecontainer 
{
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
    overflow-y: hidden;
}

#tablecontainer 
{
    width: 100%;
    margin: 0 auto;
    padding-top: 50px;
    max-width: 900px;
}

#expandtable
{
    margin: 5px 0 0 0px;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 60%;
    border-bottom: 0;
    background-color: #eee;
    margin: 0 auto;
}

.breakline { clear:both;}

.divcell 
{ 
    float:left; 
    border: 1px solid #999; 
    box-sizing: border-box; 
    min-height: 30px; 
}
.colname 
{ 
    float:left; 
    border: 1px solid #e5e5e5; 
    box-sizing: border-box;
}

.cellwidth1 { width:10%; }
.cellwidth2 { width:45%; }
.cellwidth3 { width:35%; }
.cellwidth4 { width:10%; }
4

2 に答える 2

1

Mac の Chrome でも動作します (少なくともこれはスタートです。スクロールバーは、コンテンツを移動するのではなく、コンテンツの上に移動します)。

あなたが持っているものでは、CSS だけではこの変更を考慮に入れることができないかもしれません。Javascript を使用してヘッダーの下の列の幅を見つけ、それに応じて列ヘッダーの幅を調整する必要がある場合があります。

于 2013-11-12T21:53:16.980 に答える