adding table scroll bar

Question

in HTML 5, using google chrome browser trying to add a scrollbar for the detail section of a table.

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 code:

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

in the style when the code renders it is showing:

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

But the table is rendering at a much bigger size and without a scroll bar

Welcome to the holy grail of webdev. The only browser that has had support for a scrolling tbody is Firefox. This was however a long time ago and they have removed that feature. — anddoutoi, May 21 '15 at 11:45

Mohamed Badr · Answer 1 · 2015-05-21T09:14:15.477

0

you may try this

thead, tbody { display: block; }

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

edited May 21 '15 at 09:14

answered May 21 '15 at 08:54

Mohamed Badr

2,562
2
26
43

adding table scroll bar

1 Answers1