滚动条未出现在 html 表中[关闭]答案

【问题标题】：Scroll bar not appearing in html table [closed]滚动条未出现在 html 表中[关闭]
【发布时间】：2013-07-04 06:30:26
【问题描述】：

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

我做错了什么？

同时添加 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>

【问题讨论】：

为什么有这么多反对票？我现在已经添加了 CSS。很抱歉一开始没有添加它。

标签： html css overflow

【解决方案1】：

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

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

表格不能滚动。但是看看这个答案：How to display scroll bar onto a html table

【讨论】：

感谢这项工作！如果我将溢出和高度设置为表格并删除 div 滚动条不会显示？

【解决方案2】：

你可以通过这个使用代码滚动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>

【讨论】：