如何在表格中添加垂直滚动条（剃刀视图）

Question

我正在努力在我的视图（razor/html）中添加垂直滚动条。我想将它放在包装我的数据的数据中。我曾尝试过但没有成功。

如果可能的话，需要一些帮助。

<table id = "MenuItem"  class="promo full-width alternate-rows" style="text-align: center; ">  <!-- Cedric Kehi DEMO CHANGE -->



            <tr>
                <th>Product Code
                </th>

                <th>Description <!-- JACK EDIT -->
                </th>
                <th>Product Size
                </th>
                <th>Product Material
                </th>
                <th>Excluded?
                </th>
                <th>Order
                </th>
                <th>Actions</th>
            </tr>


        <tbody id ="scroll" style="overflow : scroll">


        @foreach (var item in Model.IndexList.OrderBy(x => x.ShuffleFunction))
        {




            <tr id ="trendingDisplay" data-model="model-1">



                    <td class="center-text">
                        @Html.DisplayFor(modelItem => item.ProductCode)
                    </td>
                   @* <td>
                        @Html.DisplayFor(modelItem => item.ProductTemplate.Description)
                    </td>*@
                    <td>
                        @Html.DisplayFor(modelItem => item.Description)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Size.SizeTitle)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Material.MaterialName)
                    </td>
                    <td>
                    @Html.DisplayFor(modelItem => item.GreyOut)
                    </td>
                    <td>
                    @Html.DisplayFor(modelItem => item.ShuffleFunction)
                    </td>
                    <td class="center-text nowrap">
                        @Html.ActionLink(" ", "Edit", new { id = item.ProductID }, new { title = "Edit", @class = "anchor-icon-no-text edit" })
                        @Html.ActionLink(" ", "Details", new { id = item.ProductID }, new { title = "Details", @class = "anchor-icon-no-text details" })
                        @Html.ActionLink(" ", "Delete", new { id = item.ProductID }, new { title = "Delete", @class = "anchor-icon-no-text delete" })

  <input class ="greyout" type="checkbox"  name="grey" id="trending" />


                </td>

            </tr>



        }


            </tbody>

    </table>

Answer 1

将表格元素包装在容器中并为其指定固定高度并设置溢出属性。

<div style="height:600px;overflow-y:scroll">
    <table>
    ...
    </table>
</div>