带有HTML和CSS的表格滚动

小编典典

带有HTML和CSS的表格滚动

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>

and CSS like that

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

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

阅读 309

2020-05-16

共1个答案

小编典典

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

2020-05-16