Horizontal scrollbar for HTML table

Question

I have an HTML table with a vertical scrollbar.

HTML:

<div className="table_wrapper">
    <table>
        <thead></thead>
        <tbody className="add-insurance_table_tbody">...</tbody>
    </table>
</div>

The UI looks like this:

CSS:

&_tbody {
    height:calc(100vh - 350px);
    overflow:auto;
    overflow-x:hidden;
    display:block;
    width:100%;
    font-size: 12px;
}

Now I want to increase the width of the table and add a horizontal scrollbar. I modified the above CSS and increased the width of the table.

A horizontal scrollbar appeared, however no scrolling happens.

The UI now looks like this:

Tried CSS:

&_tbody {
    height:calc(100vh - 350px);
    overflow:auto;
    display:block;
    font-size: 12px;
    width:calc(100vh - 350px);
    overflow-x: scroll
}

You can check this https://stackoverflow.com/questions/14834198/table-scroll-with-html-and-css and https://codepen.io/yavuzselim/pen/LNYrBd — indefinite, May 23 '19 at 06:47
Can you share the exact code fiddle. It would be much helpful — Mangesh, May 23 '19 at 06:48

score 0 · Answer 1 · answered May 23 '19 at 06:49

0

You're using overflow-x: scroll; If you want a vertical bar use overflow-y: scroll; Use this:

yourTable {
   overflow-x: hidden;
   overflow-y: scroll;
}

answered May 23 '19 at 06:49

M4FI4S

166
7

score 0 · Answer 2 · answered May 23 '19 at 07:48

First method:

overflow: scroll; // Scrollbar visible
overflow: auto;   // Scrollbar displayed when needed

Second method:

Make display: block of your table

Set overflow-x: 'auto'

table{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

Horizontal scrollbar for HTML table

2 Answers2