Как добавить вертикальную полосу прокрутки в таблице (вид бритвы)

Question

Я изо всех сил пытаюсь добавить вертикальную полосу прокрутки на мой взгляд (бритва/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>