jquery - 修复了表中的前 3 行

Question

我对此有一些问题。

我正在尝试将表格中的前 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>

*/---

任何想法如何解决这个问题？

Answer 1

这需要一些工作和一些 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/