CODEWITHSUNDEEP
htmlcssjsp
HjReyes
HjReyes

Reputation: 41

CSS - how can I add a vertical scroll in html table

I'm working on a JSP web Project. I have a table that can contains data more than my table height can handle. So I want to add a vertical scroll on my table. How can I do this? I've tried other solution I saw in here but sadly it didn't work out good on me.

What I want is the header should stay/still visible even if I scroll it down. I want the data row only to get scrolled down.

below is my JSP code and CSS

JSP: (I only include the part of where my table is concern)

<div id="rightColumn" class="columns">
                <table id="timeTable">
                    <tr>
                        <th>Customer</th>
                        <th>Balance Time</th>
                        <th>Date</th>
                    </tr>
                    <c:forEach items="${timeProp}" var="_timeProp">
                        <tr>
                            <td><c:out value="${_timeProp.tb_customername}"/></td>
                            <td><c:out value="${_timeProp.tb_time}"/></td>
                            <td><c:out value="${_timeProp.tb_date}"/></td>
                        </tr>
                    </c:forEach>
                </table>
            </div>

CSS: (same goes here)

#rightColumn {
    width: 75%;
    min-height: 388px;
}

.columns {
    border: 1px solid gray;
    margin: 10px 0px 10px 10px;
    float:left;
    padding: 0px;
    font-size: 20px;
}

#timeTable
{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    text-align: left;
}

#timeTable th
{
    background-color: #4CAF50;
    padding: 5px 5px 5px 5px;
    color: white;
    padding: 8px;
}

#timeTable td, #timeTable th
{
    border: 1px solid black;
}

#timeTable tr:nth-child(even)
{
    background-color: #f2f2f2;
}

#timeTable tr:hover
{
    background-color: #ddd;
}

table tr.active {background: #ccc;}

#timeTable td
{
    padding: 2px 0px 2px 5px;
}

Thanks in advance. Hope you can help me out here.

Upvotes: 0

Views: 67

Answers (2)

SomeBeginner
SomeBeginner

Reputation: 49

.columns {
    border: 1px solid gray;
    margin: 10px 0px 10px 10px;
    float:left;
    padding: 0px;
    font-size: 20px;
    overflow: auto; /* add this*/
}

Overflow auto will give you a scroll bar if the content of your div dose not fit.

And if you want the header to stay in place when you scroll you need to give it position: fixed;

Upvotes: 1

Siphalor
Siphalor

Reputation: 723

Did you try setting overflow-y?

EDIT:

Set your height and overflow-y for the parent div.

Upvotes: 1

Related Questions