相关疑难解决方法(0)

表格滚动HTML和CSS

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

<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>
Run Code Online (Sandbox Code Playgroud)

和那样的CSS

    #products-table
{
     width: 200px;
    height: 400px;
    overflow:scroll;
}
Run Code Online (Sandbox Code Playgroud)

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

html css html-table css3

61
推荐指数
4
解决办法
36万
查看次数

使用CSS第一行冻结表头是在标题下

我已经能够冻结我的表头并且标题的宽度和其余行匹配,但是我无法从头部下方显示我的前两行.

table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    background:#eaebec;
    border:#ccc 1px solid;
    border-radius:3px;
    border-collapse:collapse;
    border-spacing: 0;
    box-shadow: 0 1px 2px #d1d1d1;
}
table th {
    padding:2px 2px 2px 2px;
    border-top:0;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #ededed;
}
table th:first-child {
    text-align: left;
}
table tr:first-child th:first-child {
    border-top-left-radius:3px;
    border-left: 0;
}
table tr:first-child th:last-child {
    border-top-right-radius:3px;
}
table tr {
    text-align: center;
}
table td:first-child {
    text-align: left;
    border-left: 0;
}
table td {
    padding:2px 2px 2px …
Run Code Online (Sandbox Code Playgroud)

html css css-tables

1
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×2

html ×2

css-tables ×1

css3 ×1

html-table ×1