Question

我有一些问题。

我正在尝试将表格中的前3列（字母）设置为固定位置，其余部分向下滚动（数字）。

/ * ---

JSFiddle with this table：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，但你可以通过附加到window对象的scroll事件来完成它。您必须将这些标题行标记为标题行（以便更容易编码）。确保将标题行包装在<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/

修复了表格中的前3行

1 个答案: