How can I add a horizontal scroll bar to a table only if it does not fit in the enclosing DIV?

Question

I have a standard HTML table. I didn't set the width of the table so it's okay if it fits on the page. However when the table contents are too wide then they extend outside of the enclosing DIV. Is there a way I can make it so that a scroll bar appears only if it's too wide?

Note I tried to add "overflow: hidden" to the DIV but then it just cuts off the table and I cannot see any more.

Answer 1

Use overflow:auto.
Read & Test it here

Answer 2

use overflow-x: auto; for horizontal scroll and overflow-y: auto; for vertical scroll and use overflow: auto; if both direction.