7

私が知っている、stackoverflow にはこのような質問が少なくとも 30 ありますが、それでも私はこれを実現できませんでした:

上部に広告を貼り付け/固定し、本文をスクロールするシンプルなテーブル。過去数日間、私はたくさんの努力をしてきましたが、今はここで助けを求めて泣いています。

ソリューションは、IE8+ および最新の FF、Chrome および Safari で動作するはずです。このような他の「可能な重複」との違いは、2 つのネストされたテーブルまたは jQuery を使用したくないということです (ただし、プレーンな JavaScript は問題ありません)。

私が欲しいもののデモ:
http://www.imaputz.com/cssStuff/bigFourVersion.html .

問題は、IE では動作しないことです。JS を使用しても問題ありません。

4

2 に答える 2

14

はい、分かりました：

テーブルを 2 つの DIV でラップする必要があります。

<div class="outerDIV">
  <div class="innerDIV">
    <table></table>
  </div>
</div>

DIV の CSS は次のとおりです。

.outerDIV {
  position: relative;
  padding-top: 20px;   //height of your thead
}
.innerDIV {
  overflow-y: auto;
  height: 200px;       //the actual scrolling container
}

その理由は、基本的に内側の DIV をスクロール可能にし、外側の DIV に貼り付けて THEAD を引き出すためです。

今theadそれを与えることによってouterDIVに貼り付けます

table thead {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

持っているtbody必要display: blockもあります。

これで、スクロールは機能しますが、幅が完全にめちゃくちゃになっていることに気付くでしょう。それがJavascriptの登場です。どのように割り当てるかを自分で選択できます。私自身、テーブルの TH に固定幅を与え、幅を取り、それらを の最初の TD 行に割り当てる単純なスクリプトを作成しましたtbody。

このようなものが動作するはずです:

function scrollingTableSetThWidth(tableId)
{
    var table = document.getElementById(tableId);

    ths = table.getElementsByTagName('th');
    tds = table.getElementsByTagName('td');

    if(ths.length > 0) {
        for(i=0; i < ths.length; i++) {
            tds[i].style.width = getCurrentComputedStyle(ths[i], 'width');
        }
    }
}

function getCurrentComputedStyle(element, attribute)
{
    var attributeValue;
    if (window.getComputedStyle) 
    { // class A browsers
        var styledeclaration = document.defaultView.getComputedStyle(element, null);
        attributeValue = styledeclaration.getPropertyValue(attribute);
    } else if (element.currentStyle) { // IE
        attributeValue = element.currentStyle[vclToCamelCases(attribute)];
    }
    return attributeValue;
}

もちろん、jQuery を使用すると、これははるかに簡単になりますが、今のところ、このプロジェクトでサードパーティのライブラリを使用することは許可されていません。

于 2012-08-04T09:56:06.900 に答える
-1

この目標を達成するために、方法を変更する必要があるかもしれません。

<div><ul><li>1</li><li>2</li></ul></div> //make it fixed
<table>
    <thead>
        <tr><th>1</th><th>2</th></tr>
    </thead>
    <tfoot></tfoot>
    <tbody></tbody>
</table>

もちろん、これはセマティックにはよくありません。しかし、js や jq を使用しない最も単純な方法です。そう思いませんか？

于 2014-03-27T04:44:16.953 に答える