HTML, CSS: Make table vertically scrollable

Question

I have a table that is dynamically created after an AJAX request (using vue.js). The number of columns and width of each column is calculated.

My problem is, that there should be a vertical scrollbar when theres not enough space in the table, but even when setting style="width: 600px; overflow-x: scroll" no scrollbar shows up and the header elements gets shrinked together to the width of the wrapper div and the table rows get clipped.

Heres my relevant code (using bootstrap and vue.js 2):

    <div class="panel-body" id="datatable">
        <table class="table data-table" id="datatable-content">
            <thead class="datatable-head" id="datatable-head">
                <tr>
                    <th v-for="value in tableHeader" v-text="value"></th>
                </tr>
            </thead>

            <tbody class="datatable-body" id="datatable-body">
                <tr v-for="row in tableRows">
                    <td v-for="key in tableHeader" v-html="highlightFilterString(row[key])"></td>
                </tr>
            </tbody>
        </table> 
    </div>

and the css:

    .data-table {
        overflow-x: scroll; 
        display: block;
        width: 100%;
    }
    .datatable-body {
        display:block;
        height: calc(100vh - 118px);/
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .datatable-head {
        display:block;
        overflow-x: scroll;
    }
    .datatable-head, .datatable-body tr {
        min-width: 100px;
        text-align: center;
    }
    .datatable-body td {
        min-width: 100px;
        text-align: center;
    }
    .datatable-head th {
        min-width: 100px;
        text-align: center;
    }

What is the problem here?

You need to give fixed height along with overflow-y

Aslam
– Aslam

2017-07-04 07:17:09 +00:00
Commented Jul 4, 2017 at 7:17 — Aslam
– Aslam, Commented Jul 4, 2017 at 7:17
I have: height: calc(100vh - 118px)

F.M.F.
– F.M.F.

2017-07-04 07:17:55 +00:00
Commented Jul 4, 2017 at 7:17 — F.M.F.
– F.M.F., Commented Jul 4, 2017 at 7:17

user3100158 · Accepted Answer · 2017-07-04 07:31:02Z

1

I commented out the overflow-x element and it seems to be working fine now. Made fiddle with static html content

https://jsfiddle.net/v7qpot2b/

 .datatable-body {
        display:block;
        height: calc(100vh - 118px);/
        overflow-y: scroll;
        /* overflow-x: hidden; */
    }

answered Jul 4, 2017 at 7:31

user3100158

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML, CSS: Make table vertically scrollable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related