我有一个像我填充数据的表
<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)
但滚动不起作用,我想修复表的高度,如果超过,则使用滚动条
我已经能够冻结我的表头并且标题的宽度和其余行匹配,但是我无法从头部下方显示我的前两行.
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)