Question

我搜索了类似的问题并找到了一些，但答案没有帮助。所以我发布它。下面是代码。当我有很多记录时，滚动条不会显示。

我做错了什么？

添加CSS

.content-cardnumber
{
    margin-left: auto;
    color:rgba(47,130,194,.8);
    width:200px;
    text-align:center;
}
.content-origintime
{
    margin-left: 110px;
    color:rgba(47,130,194,.8);
    text-align:center;
}
.content-eventcode
{
    margin-left: 130px;
    color:rgba(47,130,194,.8);
    text-align:center;
    width:200px;
}
.content-readername
{
    margin-left: 150px;
    color:rgba(47,130,194,.8);
    text-align:center;
}
.events-table
{
    background-color:#aacef6;
    overflow:auto;
}
<!DOCTYPE html>
<html>
    <head>
        <title>List of Alarms</title>
    </head>
    <body>
        <h2>View</h2>
        <div style="overflow-y:auto">
            <table class="events-table" style="overflow-y:auto">
                <tr>
                    <th class="content-cardnumber">Card Number</th>
                    <th class="content-eventcode">Event Code</th>
                    <th class="content-origintime">Event Time</th>            
                </tr>

                @foreach (IEvent e in Model.EventList)
                {
                    <tr>
                        <td class="content-cardnumber">@e.CardNumber</td>
                        <td class="content-eventcode">@e.EventCode</td>
                        <td class="content-origintime">@e.EventOriginTime</td>

                    </tr>
                }

            </table>
        </div>
    </body>
</html>

Answer 1

您必须为div或表设置高度，并且只需要一个溢出：

    <div style="overflow-y:auto; height: 400px;">
        <table class="events-table">

无法使表格可滚动。但请查看以下答案：How to display scroll bar onto a html table

Answer 2

您可以使用此代码

滚动div not table

 <div style="overflow-y:scroll;height:100px;">
        <table class="events-table" style="overflow-y:scroll;height:100px;">
            <tr>
                <th class="content-cardnumber">Card Number</th>
                <th class="content-eventcode">Event Code</th>
                <th class="content-origintime">Event Time</th>            
            </tr>
             <tr>
                <th class="content-cardnumber">Card Number</th>
                <th class="content-eventcode">Event Code</th>
                <th class="content-origintime">Event Time</th>            
            </tr> <tr>
                <th class="content-cardnumber">Card Number</th>
                <th class="content-eventcode">Event Code</th>
                <th class="content-origintime">Event Time</th>            
            </tr>

            @foreach (IEvent e in Model.EventList)
            {
                <tr>
                    <td class="content-cardnumber">@e.CardNumber</td>
                    <td class="content-eventcode">@e.EventCode</td>
                    <td class="content-origintime">@e.EventOriginTime</td>

                </tr>
                <tr>
                    <td class="content-cardnumber">@e.CardNumber</td>
                    <td class="content-eventcode">@e.EventCode</td>
                    <td class="content-origintime">@e.EventOriginTime</td>

                </tr>
                <tr>
                    <td class="content-cardnumber">@e.CardNumber</td>
                    <td class="content-eventcode">@e.EventCode</td>
                    <td class="content-origintime">@e.EventOriginTime</td>

                </tr>
                <tr>
                    <td class="content-cardnumber">@e.CardNumber</td>
                    <td class="content-eventcode">@e.EventCode</td>
                    <td class="content-origintime">@e.EventOriginTime</td>

                </tr>
            }

        </table>
    </div>

滚动条没有出现在html表中

2 个答案: