Add horizontal scrollbar to html table

html css html-table scrollbar
Tsundoku picture Tsundoku · Apr 4, 2011 · Viewed 316.9k times · Source

Is there a way to add a Horizontal scrollbar to an HTML table? I actually need it to be scrollable both vertically and horizontally depending on how the table grows but I can't get either scrollbar to appear.

Answer

Serge Stroobandt picture Serge Stroobandt · May 24, 2015

First, make a display: block of your table

then, set overflow-x: to auto.

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

Nice and clean. No superfluous formatting.

Here are more involved examples with scrolling table captions from a page on my website.

Related questions

<table> with fixed <thead> and scrollable <tbody>

I've looked through questions here and articles all over the internet, but haven't found yet solution that would satisfy my requirements. So now in 2017, is there an elegant way to have a <table> that would: be written in …

Read More
Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and cellspacing can be set like this: <table cellspacing="1" cellpadding="1"> How can the same be accomplished using CSS?

Read More
Make a div fill the height of the remaining screen space

I am working on a web application where I want the content to fill the height of the entire screen. The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want …

Read More