0

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

我究竟做错了什么？

还添加 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>
4

2 回答 2

3

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

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

表格不能滚动。但是看看这个答案：如何在 html 表格上显示滚动条

于 2013-07-06T08:04:58.463 回答
1

您可以通过此使用代码滚动 div 而不是表格 

 <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>
于 2013-07-06T08:10:55.503 回答