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

我正在努力在我的视图中添加一个垂直滚动条（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>

产品代码
描述
产品尺寸
产品材料
排除？
命令
行动
@foreach（Model.IndexList.OrderBy（x=>x.ShuffleFunction）中的var项）
{
@DisplayFor（modelItem=>item.ProductCode）
@* 
@DisplayFor（modelItem=>item.ProductTemplate.Description）
*@
@DisplayFor（modelItem=>item.Description）
@DisplayFor（modelItem=>item.Size.SizeTitle）
@DisplayFor（modelItem=>item.Material.MaterialName）
@DisplayFor（modelItem=>item.GreyOut）
@DisplayFor（modelItem=>item.ShuffleFunction）
@ActionLink（“，”编辑“，”新建{id=item.ProductID}，新建{title=“编辑”，@class=“锚图标无文本编辑”}）
@ActionLink（“，”Details“，”new{id=item.ProductID}，new{title=“Details”，@class=“anchor icon no text Details”}）
@ActionLink（“，”Delete“，new{id=item.ProductID}，new{title=“Delete”，@class=“锚图标无文本删除”}）
}

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

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

...

似乎可以工作，但它是水平的，我希望是垂直的，这样可以上下滚动