html - 添加表格滚动条

Question

在 HTML 5 中，使用 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;
}

Razor 代码:

<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;   
}