gpt4 book ai didi

html - 添加表格滚动条

转载 作者:行者123 更新时间:2023-11-28 07:51:41 25 4
gpt4 key购买 nike

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

但是表格以更大的尺寸渲染并且没有滚动条

最佳答案

你可以试试这个

thead, tbody { display: block; }

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

关于html - 添加表格滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30368797/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com