当前位置: 首页 > 面试题库 >

带有HTML和CSS的表格滚动

杜阳泽
2023-03-14
问题内容

我有一张像这样的桌子,上面有数据

<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>

and CSS like that

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

但滚动不起作用,我想固定表格的高度,如果超出高度,则使用滚动条


问题答案:

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>

Result

This is working in all browser



 类似资料:
  • 我有一个类似的表格,我用数据填充它 而CSS就是这样 但是scroll不起作用,我想固定桌子的高度,如果超过了,就使用scrollbar

  • 我有一个解决方案,通过它,我可以使用minor jQuery和CSS创建带有固定页眉/页脚的可滚动表,但我正在寻找一种方法,使其成为唯一一个跨浏览器兼容的CSS解决方案。 明确地说,我想要做的是只使用一个标记(它是有效的子标记,,,,,,,,),但采用一组满足以下条件的CSS规则: 必须在页眉/页脚/内容行之间保持列对齐 必须允许页眉/页脚在内容垂直滚动时保持固定 必须不需要任何jQuery或其他

  • 问题内容: 我认为这个问题的答案是否定的……但是,有谁知道用HTML / CSS的方法来创建有序列表,而数字后面没有句点?或者,还是指定分隔符? 理想情况下,我不想为每个数字使用不同的类来制作列表样式的图像,但是到目前为止,我已经能够想到的就是这一切……这似乎非常语义化。 IE浏览器: 问题答案: 仅使用CSS(2.1)完全可以做到: 请记住,此解决方案依赖于:before伪选择器,因此某些较旧的

  • 问题内容: 我正在宽度不相等的画布上绘制图形。每个画布是否都有自己的滚动条?我试图将所有画布放在一个div中,并指定最大宽度,但这没有用。是否可以将所有画布在页面上的可见宽度说成500像素,并且每个画布都有其滚动条以查看画布的整个宽度。 谢谢。 问题答案: 指定画布的总宽度,然后将其包裹在div中。将div设置为,并指定500px的宽度。然后,您应该具有滚动条,使您可以滚动并查看画布的隐藏部分。对

  • 问题内容: 有机会将图像放置在六边形内吗?我已经习惯了html中的六边形形状的单元格,但是我无法用(背景图像)填充它。 这是我尝试过的: 问题答案: 使用CSS3,几乎一切皆有可能: 在那里,我使用进行了不同的旋转,因此您可以获得跨浏览器(很好,_现代的_跨浏览器)蒙版,该蒙版甚至可以在蒙版区域上覆盖和单击。