相关疑难解决方法(0)

是否有跨浏览器的CSS/JavaScript技术来显示长HTML表格,使列标题保持固定在屏幕上,不要与表格主体一起滚动.想想Microsoft Excel中的"冻结窗格"效果.

我希望能够滚动表格的内容,但始终能够看到顶部的列标题.

我有一个像我填充数据的表

<table id="products-table"  style="overflow-y:scroll" >
    <thead>
        <tr>
            <th>Product (Parent Product)</th> 
            <th>Associated Sites</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Count(); i++)
        { 
        <tr>
            <td>
                <a href="Edit"><strong>@Model.ElementAt(i).Name</strong></a><br />
            </td>
            <td>
                <span class="lesser"></span>
            </td>
            <td>@Html.ActionLink("Edit Product", "Edit", "Products")<br />
                @Html.ActionLink("Associate Site", "Associate", "Products")
            </td>
         </tr>
        }
        <tr>
</tbody>
</table>

和那样的CSS

    #products-table
{
     width: 200px;
    height: 400px;
    overflow:scroll;
}

但滚动不起作用,我想修复表的高度,如果超过,则使用滚动条

是否有CSS/JavaScript技术来显示一个长HTML表格,使列标题保持固定在屏幕上,第一个coloumn保持固定并滚动数据.

我希望能够滚动表格的内容,但始终能够看到顶部的列标题和左侧的第一列.

如果有一个jQuery插件会很棒!如果它有助于我唯一关心的浏览器是Firefox.

我试图让表格在按钮点击时向左/向右滚动，将第一列保持在原位。我的数据都在一张表中，所以我不能创建两个表而不是一个。有没有办法做到这一点？见下面的小提琴。

jQuery：

$(document).ready(function() {
  $("#right").on("click", function() {
    var position = $("table").position();
    $("table").animate({
      left: position.left - 200
    }, 800);
  });
});
$("#left").on("click", function() {
var position = $("table").position();
 $("table").animate({
   left: position.left + 200
 }, 800);
});

CSS：

#table-wrapper {
width: 95%;
float: left;
overflow-x: scroll;
background: #ddd;

}

table {
 background: #fff;
 width: 1200px;
 text-align:center;
 overflow: hidden;
 position:relative;
}
table thead tr th:first-child,
table tbody tr td:first-child {
 background: yellow;
 top: auto;
 left: 0.5;
 position: absolute;
 width: 6em;
}

HTML：

<button …