-1

これにはいくつか問題があります。

テーブルの最初の 3 列 (文字) を、残りの列 (数字) を下にスクロールするときに固定位置に設定しようとしています。

/*---

このテーブルを使用した JSFiddle: http://jsfiddle.net/japeljoff/mVVN8/1/

<table>
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
</tr>
<tr>
    <td colspan="3">F</td>
    <td colspan="2">G</td>
</tr>
<tr>
    <td colspan="1">H</td>
    <td colspan="4">I</td>
</tr>
<tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr>
</table>

*/---

この問題を解決する方法はありますか？

4

1 に答える 1

0

ちょっとした作業と jQuery が必要ですが、ウィンドウ オブジェクトのスクロール イベントにアタッチすることで実行できます。これらのヘッダー行をヘッダー行としてマークする必要があります (コーディングを容易にするため)。必ずヘッダー行をラップして<thead></thead>、<table>それ自体に ID (この例では "mytable") を付けてください。

CSS を追加する必要があります。

.fixedTop {
  position: fixed;
  top: 0;
}

そして JavaScript:

var $rt = $("#mytable thead");

var TableTop = $rt.offset().top;

$(window).scroll(function () {
    if ($(window).scrollTop() > TableTop) {
        $rt.addClass("fixedTop");
    } else {
        $rt.removeClass("fixedTop");
    }
});

//Set widths of the header columns
$("#mytable thead td, #mytable tbody td").width(function (i, width) {
    return $(this).width();
});

jsFiddle: http://jsfiddle.net/mVVN8/2/

于 2013-11-13T23:39:52.473 に答える