我有一个类似的表格,里面填满了数据

<table id="productlayui-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>

像这样

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

但scroll不起作用,我想固定桌子的高度,如果超过了,就使用scrollbar

推荐答案

Table with Fixed Header

<table cellspacing="0" cellpadding="0" border="0" width="325">
  <tr>
    <td>
       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr style="color:white;background-color:grey">
            <th>Header 1</th>
            <th>Header 2</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div style="width:320px; height:80px; overflow:auto;">
         <table cellspacing="0" cellpadding="1" border="1" width="300" >
           <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
           <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>

结果

演示图像

这在所有浏览器中都有效

演示JSFIDLE http://jsfiddle.net/nyCKE/6302/

Css相关问答推荐

如何获得特定位置的Divs以根据浏览器宽度正确调整大小

显示Reaction组件上的问题.使用FlexBox时的意外大小

如何使用在另一个层定义块中定义的sass层作用域变量

为什么我的容器的弹性包裹会导致我的自动填充网格添加额外的空轨道行?

创建始终为剪辑元素的300%高度并左对齐的圆形剪辑路径

CSS子网格不显示行间距

如何使用DirectusImage标签作为背景?

如何使2个元素的宽度相同?

使用 flexbox 使图像与内容高度相同

如何使代码块输出在 quarto revealjs 演示文稿中水平滚动

Angular 以Angular 获取当前聚焦的元素

努力将 CSS 样式应用于 Elm 应用程序

在 Tailwind css 中,间距对我不起作用

最多 2 行的 Flex 水平滚动

在 CSS 中如何使用 100% 和最大内容之间的最大值

你能用 JavaScript 控制 GIF 动画吗?

为什么我们将