在HTML 5中添加表格滾動條

Question

，使用google chrome瀏覽器嘗試爲表的詳細信息部分添加滾動條。

CSS：

/*Table section for scollbar*/ 
table.tableSection {  
    display: table; 
    width: 100%; 
    max-height: 30px; 
} 
table.tableSection thead, table.tableSection tbody { 
    float: left; 
    width: 100%; 
} 

/*table.tableSection tbody { 
    overflow: auto; 
    max-height: 30px; 
}*/ 

table.tableSection tr { 
    width: 100%; 
    display: table; 
    text-align: left; 
} 
table.tableSection th, table.tableSection td { 
    width: 33%; 
    border: 1px solid black; 
} 

thead{ 
    overflow-y: scroll; 
    position: relative; 
} 

tbody{ 
    overflow: auto; 
    max-height: 10px; 
} 

剃刀代碼：

<table class="table"> 
       <thead> 
        <tr> 
         <th> 
          @Html.DisplayNameFor(model => model.GenderID) 
         </th> 
         <th> 
          @Html.DisplayNameFor(model => model.Gender) 
         </th> 
         <th> 
          @Html.DisplayNameFor(model => model.GenderShort) 
         </th> 
        </tr> 
       </thead> 

       <tbody> 
        @foreach (var item in Model) 
        { 
         <tr> 
          <td> 
           @Html.DisplayFor(modelItem => item.GenderID, new { @class = "txtGenderID", id = "txtGenderID" }) 
          </td> 
          <td> 
           @Html.DisplayFor(modelItem => item.Gender, new { @class = "txtGender", id = "txtGender" }) 
          </td> 
          <td> 
           @Html.DisplayFor(modelItem => item.GenderShort, new { @class = "txtGenderShort", id = "txtGenderShort" }) 
          </td> 

          <td> 
           @Html.ActionLink("Edit", "_GenderEdit", new { id = item.GenderID }, new { @class = "EditActionLink" }) | 
           @Html.ActionLink("Delete", "_GenderDelete", new { id = item.GenderID }, new { @class = "DeleteActionLink" }) 
          </td> 
         </tr> 
        } 
       </tbody>   

      </table> 

在風格

當代碼使得它顯示：

tbody { 
    overflow: auto; 
    max-height: 30px !important; 
} 

但該表是在一個更大的渲染大小和沒有滾動條

Answer 1

，你可以嘗試這個

thead, tbody { display: block; } 

tbody { 
    height: 100px;  
    overflow-y: auto; 
}