Scroll bar not appearing in html table

Question

I searched for similar question and found some but the answers did not help. So I am posting it. Below is the code. When i have lot of records the scroll bar is not shown.

What am I doing wrong?

Adding the CSS also

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

Why so many down votes? I have added the CSS now. Sorry for not adding it in the first place. — ckv, Jul 06 '13 at 08:13

score 3 · Accepted Answer · edited May 23 '17 at 12:06

3

You have to set a height for either the div or the table and only one overflow is required:

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

A table can't be made scrollable. But check out this answer: How to display scroll bar onto a html table

edited May 23 '17 at 12:06

Community

1
1

answered Jul 06 '13 at 08:04

John Landheer

3,999
4
29
53

Thanks this works! If i set the overflow and the height to the table and remove the div the scroll bar does not show up though? – ckv Jul 06 '13 at 08:25

score 1 · Answer 2 · answered Jul 06 '13 at 08:10

You can scroll the div not table so by this use code

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

Scroll bar not appearing in html table

2 Answers2